Tinymce react - очистить содержимое редактора

Я использую в своем проекте редактор 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).

Есть идеи, что здесь не так?

Кроме того, есть ли альтернативный подход к очистке содержимого редактора?

Это потому, что clear EditorContent выполняет setState и запускает рендеринг компонента, поэтому метод handleEditorChange вызывается снова.

— 12.10.2018 15:55

Итак, каков должен быть подход здесь?

— 12.10.2018 17:47

reactjs tinymce

12.10.2018 15:35

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Массив зависимостей в React

Все о массиве Dependency и его связи с useEffect.

Компонент против элемента в ReactJS - секрет оптимизации производительности за счет повторного использования элементов

Проще говоря, компонент - это фабрика для создания элементов.

Руководство по использованию хука useEffect для методов жизненного цикла React

667

Ответы 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}
                        />

Это вызовет повторную визуализацию компонента Editor, и он будет сброшен в состояние по умолчанию.

21.11.2020 17:50