CKEditor 5 React自定义图像上传 [英] CKEditor 5 React custom image upload

问题描述

我整天都在努力使CKEditor和React一起工作。除了图像，一切似乎都还可以。我

I have spent all day trying to get CKEditor with React to work. Everything seems to be okay except the images. I

我已经有一种方法可以将图像上传到我的服务器了（天蓝色）。我只需要知道如何使用React将其连接到CKEditor！我不断收到错误消息未定义上传适配器。

I have a way to upload the images to my server already (azure). ALL I NEED is to know how to connect it to the CKEditor with React! I keep getting the error "Upload adapter is not defined."

<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中的位置。

I'm guessing it has something to do with the config file? I already have the function that uploads the file and returns the URL, I just don't know where to add that into the CKEditor in React.

推荐答案

该错误表示未连接任何上载适配器。

That error means there is no upload adapter connected.

首先，您需要实现自己的自定义上传适配器，用于将图像上传到服务器。在此堆栈溢出响应中有一个示例

First, you'll need to implement your own Custom Upload Adapter which handles uploading the images to the server. There’s a sample in this Stack Overflow response

然后，您链接您的 onInit 方法将编辑器添加到您的上传适配器。像这样：

And then, you link the editor to your upload adapter in your onInit method. Like so:

<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类实现。

UploaderAdapter in the code is the name of your UploadAdapter class implementation.

这篇关于CKEditor 5 React自定义图像上传的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！