javascript - CKEditor 5 React 自定义图片上传

Question

我花了一整天的时间试图让 CKEditor 与 React 一起工作。除了图像之外，一切似乎都很好。我

我已经有办法将图像上传到我的服务器(天蓝色)。我所需要的只是知道如何使用 React 将它连接到 CKEditor!我不断收到错误“上传适配器未定义。”

<CKEditor
          editor={ ClassicEditor }
          data={this.state.body ? this.state.body : "<p>Body text...</p>"}
          onInit={ editor => {
            // You can store the "editor" and use when it is needed.
            console.log( 'Editor is ready to use!', editor );
          } }
          onChange={ ( event, editor ) => {
            const data = editor.getData();
            console.log( { event, editor, data,}, "DATA" );
          } }
          // config={upload=this.uploadImage()}
          
        />

我猜这与配置文件有关？我已经有了上传文件并返回 URL 的功能，只是不知道在 React 的 CKEditor 中哪里添加它。

Answer 1

该错误意味着没有连接上传适配器。

首先，您需要实现自己的 Custom Upload Adapter它负责将图像上传到服务器。有一个样本 in this Stack Overflow response

然后，在 onInit 方法中将编辑器链接到上传适配器。就像这样:

<CKEditor
    editor={ClassicEditor}
    data={this.state.body ? this.state.body : "<p>Body text…</p>"}
    onInit={editor => {
       // Connect the upload adapter using code below 
       editor.plugins.get("FileRepository").createUploadAdapter = function(loader) {
          return new UploadAdapter(loader);
       };
       console.log("Editor is ready to use!", editor);
    }}
    onChange={(event, editor) => {
        const data = editor.getData();
        console.log({ event, editor, data }, "DATA");
    }}
/>

代码中的

UploaderAdapter 是 UploadAdapter 类实现的名称。