Question

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

Answer 1

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

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

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/

Draft.js：如何使用原子类型构建ContentBlock？

1 个答案: