draftjs - 如何在 Draft.js 编辑器工具栏中添加自定义按钮以添加水平规则以及如何使用 stateTOHTML 获取内联样式

Question

我有一个带有基本工具栏标题的文本编辑器

我想添加一个文本对齐选项（右、左和中心缩进）和一个分隔线（水平线）选项我正在使用 react-draft-wysiwyg 编辑器并且没有其他插件。

 <Editor
          editorState={this.state.editorState}
          onEditorStateChange={this.handleEditorChange}
          wrapperClassName="wrapper-class"
          editorClassName="editor-class"
          toolbarClassName="toolbar-class"
          toolbar={{
            options: ['inline', 'blockType', 'list', 'emoji', textAlign]
        }}

请有人指导我如何在 Draft.js 工具栏中添加自定义选项。

Answer 1

我正在使用“draftjs-to-html”中的 import draftToHtml；从 'html-to-draftjs' 导入 htmlToDraft；

用于应用内联样式，它就像魅力一样工作。而不是使用 stateToHTML/covertToHTML 使用 draftToHtml(convertToRaw( this.state.editorState.getCurrentContent() ));

并将 HTML 转换为原始数据使用： this.setState({ editorState: EditorState.createWithContent( ContentState.createFromBlockArray(htmlToDraft(data)) ), });