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

Question

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

文档中似乎没有关于如何将样式应用于包装 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 block 来实现预期的结果:

_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;
    }
  }

这还需要为 block 编写额外的 css 类以匹配颜色 block 的样式(例如 .block-style-yellow { color: rgb(180, 180, 0, 1.0) } ).

此工作的示例可在 this fiddle 中找到。

Answer 1

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

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