如何使用reactjs在ckeditor5中上传图片base64

Question

我正在使用ckeditor5制作一些富文本。我几乎需要经典构建器附带的所有功能。当我尝试插入一些图像时，出现“filerepository-no-upload-adapter”错误。 这是我的代码：

import { Component } from "react";
import { CKEditor } from "@ckeditor/ckeditor5-react";
import ClassicEditor from "@ckeditor/ckeditor5-build-classic";

class RichText extends Component {
  render() {
    return (
      <CKEditor
        editor={ClassicEditor}
        data={this.props.initialData}
        onChange={(event, editor) => {
          this.props.handleFunction(editor.getData());
        }}
        config={{
          toolbar: [
            "undo",
            "redo",
            "|",
            "bold",
            "italic",
            "|",
            "link",
            "bulletedList",
            "imageUpload",
            "|",
          ],
        }}
      />
    );
  }
}
export default RichText;

我在文档（https://ckeditor.com/docs/ckeditor5/latest/features/images/image-upload/base64-upload-adapter.html）中看到我需要安装另一个软件包（“ckeditor5-上传”）并添加以下内容：

import Base64UploadAdapter from '@ckeditor/ckeditor5-upload/src/adapters/base64uploadadapter';

ClassicEditor
    .create( document.querySelector( '#editor' ), {
        plugins: [ Base64UploadAdapter, /* ... */ ],
        toolbar: [ /* ... */ ]
    } )
    .then( /* ... */ )
    .catch( /* ... */ );

我尝试在配置中插入插件，但它不起作用，它说我正在复制模块。我只需要将 base64 代码发送到数据库。 谢谢你帮我！

Answer 1

使用react/next Base64UploadAdapter 或SimpleUploadAdapter 不起作用，您可以使用自定义插件。这是根据您的特定项目的需要添加的相同基本结构的代码：

function uploadAdapter(loader) {
  return {
    upload: () => {
      return new Promise((resolve, reject) => {
        const body = new FormData();
        loader.file.then((file) => {
          body.append("files", file);

          fetch(uploadEndpoint, {
            method: "POST",
            headers: {
              Authorization: `Bearer ${token}`
            },
            body: body
       
          })
          .then((res) => res.json())
          .then((res) => { 
            // resolve();
            resolve({
              default: res.imageAddress,
            });
          })
          .catch((err) => {
            reject(err);
          });
      });
    });
    }
  };
 }

function uploadPlugin(editor) {
  editor.plugins.get("FileRepository").createUploadAdapter = (loader) => {
    return uploadAdapter(loader);
  };
}

在服务器代码 api 上存储图像并作为响应发送该图像的地址也可以使用 blob。如果访问您的 api 需要授权，请发送带有令牌的标头。