根据React状态更新CkEditor配置

Question

我在我的React应用程序中使用CkEditor5来实现CKEditor。 我想根据我的状态更新配置，但在状态更改后似乎编辑器组件并没有更新。

这是我的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}`

- Shahrukh Mohammad

---

你在这方面有什么进展了吗？我也遇到了同样的问题（Vue项目），尝试根据用户选择更改语言，但发现无法在初始加载后更改配置... 真是让人发疯，应该很简单才对吧！？ - webkit

我还没有找到任何解决方案，我想我将不得不在 GitHub 上提出一个问题。 - Shahrukh Mohammad

如果您找到了，请在此处链接，我已经搜索了文档，没有提到重置任何配置选项。你会认为编辑器会有一些动态配置选项的setter方法。 - webkit

好的，我会提出一个问题，如果我找到答案，我会在这里更新。 - Shahrukh Mohammad

@webkit，您可以在此处查看我发布的问题（https://github.com/ckeditor/ckeditor5-react/issues/132）。目前还未解决，请您也添加您的评论。 - Shahrukh Mohammad

@webkit 我已经找到了解决方案。使用ClassicEditor而不是CKEditor组件。请查看下面的答案，获取更多详细信息。 - Shahrukh Mohammad

Answer 1

我通过使用 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();

- Shahrukh Mohammad

Answer 2

我的解决方案是通过使用自定义上传适配器向编辑器e添加ref和自定义状态。现在，我能够将当前状态数据发送到服务器，而无需使用头文件。

<CKEditor name="content" ref={editorRef}
            editor={Editor}
            config={customEditorConfig}
            data={article.content}

            customPropArticle={article}

            onReady={editor => {
                editor.editorRef = editorRef;
            }}
            onChange={onEditorChangeHandle}
        />

从 UploadAdapter：

_sendRequest() {
    const editorRef = this.editor.editorRef;
    const { customPropArticle } = editorRef.current.props;
    
    this.loader.file.then(file => {
        const data = new FormData();

        data.append('id', customPropArticle.Id);
        data.append('upload', file);

        this.xhr.send(data);
    });

- Andre RB