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

【问题标题】：How to add custom button in draft.js editor toolbar for adding a horizontal rule and how to get inline styles using stateTOHTML如何在 Draft.js 编辑器工具栏中添加自定义按钮以添加水平规则以及如何使用 stateTOHTML 获取内联样式
【发布时间】：2021-12-29 12:55:24
【问题描述】：

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

我想添加一个文本对齐选项（右、左和中心缩进）和一个分隔线（水平线）选项我正在使用 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 工具栏中添加自定义选项。

【问题讨论】：

标签： draftjs draft-js-plugins react-draft-wysiwyg draftail

【解决方案1】：

我正在使用从'draftjs-to-html'导入draftToHtml；从 'html-to-draftjs' 导入 htmlToDraft;

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

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

【讨论】：