How to add custom button in draft.js editor toolbar for adding a horizontal rule and how to get inline styles using stateTOHTML

Question

I have a texteditor with a basic toolbar header

I want to add a text alignment options(right, left, and center indent) and a divider(horizontal line) option I am using react-draft-wysiwyg editor and no additional plugins.

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

Please someone, guide me on how to add custom options in the draft.js toolbar.

Answer 1

I am using import draftToHtml from 'draftjs-to-html'; import htmlToDraft from 'html-to-draftjs';

for applying inline styles and it is working like charm. Instead of using stateToHTML / covertToHTML use draftToHtml(convertToRaw( this.state.editorState.getCurrentContent() ));

and for converting HTML to raw data use: this.setState({ editorState: EditorState.createWithContent( ContentState.createFromBlockArray(htmlToDraft(data)) ), });