时间戳

首页 > 解决方案 > CKEditor 5 React 自定义图片上传

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

问题描述

我花了一整天的时间试图让 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 中。

标签： javascriptreactjsckeditor

解决方案

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

首先，您需要实现自己的自定义上传适配器来处理将图像上传到服务器。此 Stack Overflow 响应中有一个示例

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

<CKEditor
    editor={ClassicEditor}
    data={this.state.body ? this.state.body : "<p>Body text…&lt;/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 类实现的名称。

推荐阅读