tinymce react - clear editor content

Question

I am using tinymce editor in my project. The code is as follows.

<Editor
                              initialValue={selectedDocument.html_content}
                              init={{
                                plugins: 'link image code',
                                toolbar: 'undo redo | bold italic | alignleft aligncenter alignright | code',
                                height: 600
                              }}
                              onChange={this.handleEditorChange}
                            />

To clear the editor i used the following code

clearEditorContent = () => {
    let documentDetails = {...this.state.documentDetails};
    documentDetails['html_content']  = '';
    this.setState({documentDetails});
  }



 handleEditorChange = (e) => {
    let htmlContent = e.target.getBody().innerHTML;
    this.setDocumentDetails('html_content', htmlContent)
  }

But this clearEditorContent method somehow triggers the handleEditorChangeMethod and again sets the html_content

(content is still there in the editor and so e.target.getBody().innerHTML sets html_content again).

Any idea on what is wrong here?

Also, is there any alternate approach to clear the editor content?

That’s because clear EditorContent does setState and that triggeres a render of the component so handleEditorChange method gets called again — Hemadri Dasari

Lekens Lekens · Accepted Answer · 2020-11-21T16:50:56

To clear the editor you can choose to re-render the editor by setting state.

Also, you can set a Key on the Editor component and change the key once you feel you don't need the current content again like this:

const [editorKey, setEditorKey] = React.useState(4);


const clearEditor = () => {
    const newKey = editorKey * 43;
    setEditorKey(newKey);
    }

You can call the clearEditor on form submission.

<Editor key={editorKey}
                          initialValue={selectedDocument.html_content}
                          init={{
                            plugins: 'link image code',
                            toolbar: 'undo redo | bold italic | alignleft aligncenter alignright | code',
                            height: 600
                          }}
                          onChange={this.handleEditorChange}
                        />

This will cause a re-render of the Editor component and it will be reset to its default state.

tinymce react - clear editor content

1 Answers