6

我正在使用 Draft.js 向我的 React 应用程序引入文本编辑器。我已经使它适用于粗体、斜体和下划线,但我不知道如何将文本更改为项目符号。我已阅读文档,但找不到任何有用的信息。有人可以帮忙吗?

4

2 回答 2

13

RichUtils您可以使用of将任何文本块转换为项目符号draft-js。您可以这样做:

// button to turn text block to bullet points
<button onClick={this.toggleBulletPoints}>Bullet points</button>

toggleBulletPoints(){
    this.setState({
        editorState: RichUtils.toggleBlockType(
            this.state.editorState,
            'unordered-list-item'
        )
    })
}

draft-js这是在编辑器中更改内联样式和块类型的完整示例: https ://github.com/facebook/draft-js/blob/master/examples/draft-0-10-0/rich/rich.html

于 2016-09-14T10:41:26.927 回答
2

我只想发表评论,但我没有足够的业力......

在标记为正确的答案中,我不确定这将如何工作。看起来状态设置不正确。不应该这样设置:

<button onClick={this.toggleBulletPoints}>Bullet points</button>

toggleBulletPoints(){
    this.setState({
        editorState: RichUtils.toggleBlockType(
            this.state.editorState,
            'unordered-list-item'
        )
    })
}

我认为您不能在不定义其键的情况下直接将函数的输出保存到状态。至少,当我尝试标记为正确的答案时,它对我不起作用。

此外,由于这是一年前更新的,这里是一个更新的可能解决方案:

constructor(props) {
  super(props);
  this.state = {
    editorState: EditorState.createEmpty()
  };
}

onChange = (editorState) => {
  this.setState({
    editorState
  });
};

toggleBlockType = () => {
  this.onChange(
    RichUtils.toggleBlockType(this.state.editorSection, 'unordered-list-item')
  );
};

render() {
  return (
    <div>
      <Editor
        editorState={this.state.editorState}
        onChange={this.onChange}
      />
    </div>
  )
}

希望这对某人有帮助!

于 2019-08-13T20:45:59.353 回答