Draft.js：如何构建具有原子类型的 ContentBlock？

Question

我定义了一个 blockRendererFn 回调来使用我自己定义的组件渲染一个块。但是如何使用现有内容构建编辑器？ContentBlock 的构造函数无法选择接受我的组件

Answer 1

ContentBlock 的构造函数无法选择接受我的组件

您可以将自定义组件名称传递给配置对象的type属性ContentBlock。例如，我们有一个带有MyCustomBlock名称的自定义组件。我们有一个字符串数组，您希望将其包装在自定义组件中并显示为编辑器的现有内容。以ContentBlock这种方式创建一个s数组：

const input = ['foo', 'bar', 'baz'];

const contentBlocksArray = input.map(word => {
  return new ContentBlock({
    key: genKey(),
    type: 'MyCustomBlock',
    characterList: new List(Repeat(CharacterMetadata.create(), word.length)),
    text: word
  });
});

并使用EditorState.createWithContent和ContentState.createFromBlockArray方法获取初始编辑器状态：

this.state = {
  editorState: EditorState.createWithContent(ContentState.createFromBlockArray(contentBlocksArray))
};

看看这个工作示例 - http://jsfiddle.net/levsha/vp8utkwv/