草稿 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) }）。

这个工作的一个例子可以在这个小提琴中找到

Answer 1

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

我还没有看到你的完整代码，但你正在尝试提供内联样式，这可能就是你看到所需颜色的文本而不是项目符号的原因。相反，请尝试在渲染时更改“unordered-list-item”类型的样式。