Question

我在项目中使用tinymce编辑器。代码如下。

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

要清除编辑器，我使用了以下代码

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)
  }

但是这个clearEditorContent方法以某种方式触发handleEditorChangeMethod并再次设置html_content

（内容仍在编辑器中，因此e.target.getBody（）。innerHTML会再次设置html_content ）。

任何关于这里出什么问题的主意吗？

还可以使用其他方法清除编辑器内容吗？

Answer 1

要清除编辑器，您可以选择通过设置状态来重新渲染编辑器。

此外，您可以在编辑器组件上设置一个键，并在感觉不再需要当前内容时更改键，如下所示：

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


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

您可以在表单提交时致电clearEditor。

<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}
                        />

这将导致重新渲染编辑器组件，并将其重置为默认状态。

tinymce反应-清除编辑器内容

1 个答案: