Javascript DraftJs创建尽可能简单的自定义块

在草稿中实现自定义块的最简单方法是什么？ 目前，我将此函数用于默认块

  editorToggleBlockType = (blockType) => {
    this.onChange(
      RichUtils.toggleBlockType(
        this.state.editorState,
        blockType
      )
    );
  }

然后我可以使用blockStyler应用自定义类

  blockStyler = (block) => {
    if (block.getType() === 'unstyled') {
     return 'paragraph';
    } else {
     return `custom-${block.getType()}`;
    }
  }

不幸的是，blockType只接受默认类型，如blockquote、ol、code block等，而在自定义类型上则会出现错误

Uncaught TypeError: Cannot read property 'wrapper' of undefined

---

我的问题是-如何强制编辑器接受自定义块类型，以便我可以对它们应用类名？谢谢。

您需要在

blockRenderMap

中定义它

从：

如果我们一字不差地遵循此示例，您将得到一个类似以下内容的块：

...
<MyCustomBlock>
  <MediaComponent />
</MyCustomBlock>
...

。。。
...

来自

blockStyleFn

的

className

将被传递到

MyCustomBlock

，因此您可以将其传递到您喜欢的任何本机DOM节点。这也是为什么会出现

TypeError

——DraftJS在

blockRenderMap

中找不到自定义块

---

我希望这能回答你的问题。DraftJS可能令人困惑，但它是构建RTE的一个非常强大的框架。

您需要在

blockRenderMap

中定义它

从：

如果我们一字不差地遵循此示例，您将得到一个类似以下内容的块：

...
<MyCustomBlock>
  <MediaComponent />
</MyCustomBlock>
...

。。。
...

来自

blockStyleFn

的

className

将被传递到

MyCustomBlock

，因此您可以将其传递到您喜欢的任何本机DOM节点。这也是为什么会出现

TypeError

——DraftJS在

blockRenderMap

中找不到自定义块

---

我希望这能回答你的问题。DraftJS可能会让人困惑，但它是构建RTE的一个非常强大的框架。

这帮了大忙，谢谢。我实现了这样的东西：

constblockrendermap=Immutable.Map（{'backgroundColor'：{element:'section'，wrapper:{this.props.children}}）和大于blockStyler应用正确的类来设置背景色。遗憾的是，它只适用于常规文本，斜体或粗体，当我习惯于更改H1、h2、h3元素或列表的背景色时，它会删除以前的样式。我如何才能包装选定的元素而不是替换它们？在这种情况下，您应该使用blockRendererFn渲染自定义H1等。您可以通过任意道具传递块组件，允许您100%自由地使用I-one样式。在blockRenderMap中使用包装器要灵活得多。它的用例更侧重于使用HOC包装块，以实现拖放之类的功能，你可以检查“header one”等，或者你能想到的任何自定义块。有没有更简单的方法来实现像这样的简单示例：
Heading1Heading2
我试图实现的是在父块中包装选定元素并在其上应用背景色的功能。你可以更改基于块数据初始化，但在imo中使用自定义块组件会更好。这很有帮助，谢谢。我实现了这样的东西：
constblockrendermap=Immutable.Map（{'backgroundColor'：{element:'section'，wrapper:{this.props.children}}）和大于blockStyler应用正确的类来设置背景色。遗憾的是，它只适用于常规文本，斜体或粗体，当我习惯于更改H1、h2、h3元素或列表的背景色时，它会删除以前的样式。我如何才能包装选定的元素而不是替换它们？在这种情况下，您应该使用blockRendererFn渲染自定义H1等。您可以通过任意道具传递块组件，允许您100%自由地使用I-one样式。在blockRenderMap中使用包装器要灵活得多。它的用例更侧重于使用HOC包装块，以实现拖放之类的功能，你可以检查“header one”等，或者你能想到的任何自定义块。有没有更简单的方法来实现像这样的简单示例：
Heading1Heading2
我试图实现的是在父块中包装选定元素并在其上应用背景色的功能。你可以更改基于块数据初始化，但最好使用自定义块组件imo。
...
<MyCustomBlock>
  <MediaComponent />
</MyCustomBlock>
...