javascript JS无序列表项目符号颜色草稿

dl5txlt9 于 2023-04-04 发布在 Java

关注(0)|答案(3)|浏览(133)

我已经在一个项目上实现了Draft JS作为一个简单的编辑器，但我在设计无序列表时遇到了麻烦，特别是改变项目符号的颜色以匹配文本颜色。
文档中似乎没有关于如何将样式应用到 Package unordered-list-item项目的li的信息。我可以选择文本并应用颜色，但这会产生如下编辑器状态：

{
  "entityMap": {},
  "blocks": [
    {
      "key": "bcci",
      "text": "Heading",
      "type": "unstyled",
      "depth": 0,
      "inlineStyleRanges": [
        {
          "offset": 0,
          "length": 7,
          "style": "red"
        }
      ],
      "entityRanges": []
    },
    {
      "key": "28tv7",
      "text": "One",
      "type": "unordered-list-item",
      "depth": 0,
      "inlineStyleRanges": [
        {
          "offset": 0,
          "length": 3,
          "style": "yellow"
        }
      ],
      "entityRanges": []
    },
    {
      "key": "85hig",
      "text": "Two",
      "type": "unordered-list-item",
      "depth": 0,
      "inlineStyleRanges": [
        {
          "offset": 0,
          "length": 3,
          "style": "red"
        }
      ],
      "entityRanges": []
    },
    {
      "key": "6fkt5",
      "text": "Three",
      "type": "unordered-list-item",
      "depth": 0,
      "inlineStyleRanges": [
        {
          "offset": 0,
          "length": 5,
          "style": "red"
        }
      ],
      "entityRanges": []
    },
    {
      "key": "ah3co",
      "text": "End",
      "type": "unstyled",
      "depth": 0,
      "inlineStyleRanges": [
        {
          "offset": 0,
          "length": 3,
          "style": "red"
        }
      ],
      "entityRanges": []
    }
  ]
}

有没有人有经验/可以指出我的方向，如何添加颜色的子弹？

更新

经过一些调查和阅读文档，我能够通过添加自定义blockStyleFn并将自定义类添加到li块来实现所需的结果：

_getBlockStyle (block) {
    const blockStyles = [];
    const styleMap = Object.keys(colorStyleMap);

    switch (block.getType()) {
      case 'unordered-list-item':
        // With draft JS we cannot output different styles for the same block type.
        // We can however customise the css classes:
        block.findStyleRanges((item) => {
          const itemStyles = item.getStyle();
          return _.some(styleMap, (styleKey) => itemStyles.includes(styleKey));
        }, (startCharacter) => {
          if (startCharacter === 0) {
            // Apply the same styling to the block as the first character
            _.each(block.getInlineStyleAt(startCharacter).toArray(), (styleKey) => {
              blockStyles.push(`block-style-${styleKey}`);
            });
          }
        });

        return blockStyles.join(' ');
      default:
        return null;
    }
  }

这也需要为区块编写额外的css类，以匹配颜色区块的样式（例如.block-style-yellow { color: rgb(180, 180, 0, 1.0) }）。
this fiddle中提供了一个这种工作方式的示例

JavaScript

来源：https://stackoverflow.com/questions/39143664/draft-js-unordered-list-bullet-colour

3条答案

按热度按时间

uelo1irk1#

你看过这个块样式吗？https://facebook.github.io/draft-js/docs/advanced-topics-block-styling.html#content
我还没有看到你的整个代码，但你试图给予内联风格可能是这就是你看到所需的颜色，但不是子弹的文本的原因。相反，尝试在渲染时更改'unordered-list-item'类型的样式。

赞(0）回复(0）举报 2023-04-04

wvmv3b1j2#

Drfat-js不能将不同的块样式应用到相同的块类型。所以你可以：

注入不同的样式到html，使用不同的块类型为项目符号颜色和Map类型到blockStyleFn prop中的样式。

或

像这样改变草稿源，你可以在块 meta数据中设置块样式。

赞(0）回复(0）举报 2023-04-04

js5cn81o3#

对于那些想要有不同大小的子弹的人，我是这样做的。
1.使用blockStyleFn prop传递getBlockStyle函数。

<Editor 
    blockStyleFn={this.getBlockStyle}
    decorators={customDecorators}>

1.在这个函数中，为有序或无序的列表项定义一个动态的css类名。使用块键来设置一个动态的类名。

getBlockStyle(block) { 
if (block.getType() === "ordered-list-item" || block.getType() === "unordered-list-item") {
        return `size-for-${block.getKey()}`
      }
    }

1.使用draftJS装饰器特性。定义一个策略。customDecorators数组被传递给编辑器装饰器prop。

const customDecorators = [{
    strategy: listStrategy,
    component: BulletListBlock }];

1.创建一个装饰器组件，用您在第2步中定义的名称在head中动态设置一个css类。

import React from "react";
interface Props {
    children: JSX.Element;
    contentState: any;
    blockKey: string;
}

const BulletListBlock: React.FC<Props> = (props) => {
    const contentBlock = props.contentState.getBlockForKey(props.blockKey);

    const sizeValue = //use some logic here to retrieve size from contentBlock;

    var css = `.size-for-${props.blockKey} { size: ${sizeValue}; }`;
    var head = document.head || document.getElementsByTagName('head')[0];
    var style = document.createElement('style');

    head.appendChild(style);
    style.appendChild(document.createTextNode(css));

    return <>
        { props.children }
    </>;
};

export default BulletListBlock;

赞(0）回复(0）举报 2023-04-04

我来回答

javascript JS无序列表项目符号颜色草稿

更新

3条答案

相关问题

热门标签

最新问答