使用无序列表启动Draft.js编辑器

Question

我有一个字符串数组，我想用一个无序列表预先填充draft.js编辑器。 这是代码：

const content = ContentState.createFromText(input.join('*'), '*')
const editorState = EditorState.createWithContent(content)
this.setState({ 
  editorState: RichUtils.toggleBlockType(editorState, 'unordered-list-item'
})

这仅为数组中的第一个条目创建了一个项目符号项，但其他项不继承blockstyle。

有什么想法吗？

Answer 1

您可以使用构造函数new ContentBlock()创建ContentBlock的数组。并使用ContentState.createFromBlockArray生成初始编辑器状态。看看这个jsfiddle - http://jsfiddle.net/levsha/uy04se6r/

constructor(props) {
  super(props);
  const input = ['foo', 'bar', 'baz'];

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

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