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

【问题标题】：Initiate a Draft.js Editor with unordered list使用无序列表启动 Draft.js 编辑器
【发布时间】：2017-10-27 19:06:54
【问题描述】：

我有一个字符串数组，我想将它作为无序列表预先填充到 draft.js 编辑器中。代码如下：

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

这只是为数组中的第一个条目创建了一个项目符号项，但其他项没有继承块样式。

有什么想法吗？

【问题讨论】：

标签： javascript reactjs draftjs

【解决方案1】：

您可以使用构造函数new ContentBlock() 创建ContentBlocks 数组。并使用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))
  };
}

【讨论】：