5

我已经在一个项目中将 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) }）。

此小提琴中提供了此工作的示例

在此处输入图像描述

4

2 回答 2

1

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

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

于 2016-08-25T22:20:04.360 回答
1

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

  • 向 html 注入不同的样式，对项目符号颜色使用不同的块类型，并将类型映射到blockStyleFnprop 中的样式。

或者

  • 像这样更改草稿源，您可以在块元数据中设置块样式。
于 2016-08-26T06:13:32.540 回答