Draft JS 无序列表项目符号颜色

Question

我已经在一个项目中将 Draft JS 作为一个简单的编辑器实现，但是我在设置无序列表的样式时遇到了问题，特别是更改项目符号的颜色以匹配文本颜色。

文档中似乎没有关于如何将样式应用于包装

li

项目的

unordered-list-item

的信息。我可以选择文本并应用颜色，但这会产生如下编辑器状态：

{
  "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

中找到

Answer 1

你看过这个块样式吗？ https://facebook.github.io/draft-js/docs/advanced-topics-block-styling.html#content

我还没有看到你的整个代码，但你试图提供内联样式可能是你看到所需颜色的文本而不是项目符号的原因。而是尝试在呈现时更改“无序列表项”类型的样式。

Answer 2

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

• 为html注入不同的样式，为bullet使用不同的块类型 颜色并将类型映射到

  blockStyleFn

  prop.
中的样式

或

• 像this一样更改草稿源，您可以在块元数据中设置块样式。

Answer 3

对于那些想要不同子弹尺寸的人，我是这样做的。

1. 使用 blockStyleFn 属性传递 getBlockStyle 函数。

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

2. 在此函数中，为有序或无序列表项定义动态CSS类名。使用块键设置动态类名。

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

3. 使用 draftJS 装饰器功能。定义策略。 customDecorators 数组被传递给 Editor decorators 属性。

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

4. 创建一个装饰器组件，它使用您在步骤 2 中定义的名称在头部动态设置一个 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;