Обновление конфигурации CkEditor на основе состояния React - PullRequest
Новая
       3

Обновление конфигурации CkEditor на основе состояния React

1 голос
/ 25 января 2020

Я использую CkEditor5 для реализации CKEditor в моем приложении React. Я хочу обновить конфиг относительно моего состояния. Но кажется, что компонент редактора не обновляется даже после изменения состояния. Вот мой компонент CKEditor 

<CKEditor
    editor={ ClassicEditor }
    data={this.state.content}
    onInit={ editor => {
        console.log( 'Editor is ready to use!', editor );
    } }
    config={{
      simpleUpload: {
      uploadUrl: uploadUrl,
      headers: {
          'X-CSRFToken': csrftoken,
      }
    }}}
    onChange={ ( event, editor ) => {
        const data = editor.getData();
        this.setState({
          content: data
        })
        console.log( { event, editor, data } );
    } }
    onBlur={ ( event, editor ) => {
        console.log( 'Blur.', editor );
    } }
    onFocus={ ( event, editor ) => {
        console.log( 'Focus.', editor );
    } }
/>

Я хочу обновить URL загрузки на основе состояния. Он хранится в переменной, как показано ниже - 

const csrftoken = getCookie('csrftoken');
const uploadUrl = `https://example.com/api/blog/posts/images/${this.state.id}`

1 Ответ

1 голос
/ 04 февраля 2020

Я решил это, используя ClassicEditor вместо CKEditor компонента. Я сделал это, написав две функции для этого. Сначала getEditorConfig, который даст мне измененный конфиг на основе других параметров. 

getEditorConfig = () => {
    const csrftoken = getCookie('csrftoken');
    const debug = window.location.hostname === "localhost" || window.location.hostname === "127.0.0.1"
    const uploadUrl = debug ? `http://127.0.0.1:8000/api/blog/posts/images/${this.state.id}`
      : `https://example.com/api/blog/posts/images/${this.state.id}`

    return {
      simpleUpload: {
      uploadUrl: uploadUrl,
      headers: {
          'X-CSRFToken': csrftoken,
      }
    }}
  }

Затем вспомогательная функция, которая создает новый экземпляр редактора и добавляет его в DOM. Я храню экземпляр редактора в состоянии. 

  addEditor = () => {
    const config = this.getEditorConfig();

    ClassicEditor
      .create( document.querySelector( '#editor' ), config)
      .then(newEditor => this.setState({editor: newEditor}))
      .catch( error => {
          console.log( error );
      });
  }

В одной из проблем предлагается уничтожить старый редактор и создать новый, когда вы хотите обновить конфигурацию. Для этого используйте следующие две строки для уничтожения и используйте addEditor для создания нового редактора. 

const { editor } =  this.state;
editor.destroy();
...