Question

我已经在一个项目上实现了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

我还没有看到你的整个代码，但你所尝试的是提供内联样式可能就是你看到所需颜色的文本而不是子弹的原因。而是尝试在渲染时更改“unordered-list-item”类型的样式。

Answer 2

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

为html注入不同的样式，为子弹使用不同的块类型颜色并将类型映射到blockStyleFn prop。

或

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

草稿JS无序列表子弹颜色

更新

2 个答案: