React中CKEditor5实现Base64图片上传的问题求助

问题根源 #

预构建的ClassicEditor默认搭载SimpleUploadAdapter，该适配器需要配置后端上传URL才能使用；而你需要的是将图片转为Base64编码直接嵌入内容的Base64UploadAdapter，直接添加插件会因两个适配器同属ckeditor5-upload包导致模块重复报错。

解决方案 #

1. 安装依赖 #

执行命令安装ckeditor5-upload包：

npm install @ckeditor/ckeditor5-upload --save

2. 修改组件代码 #

替换默认的上传适配器为Base64适配器，避免模块冲突：

import { Component } from "react";
import { CKEditor } from "@ckeditor/ckeditor5-react";
import ClassicEditor from "@ckeditor/ckeditor5-build-classic";
import Base64UploadAdapter from '@ckeditor/ckeditor5-upload/src/adapters/base64uploadadapter';
import SimpleUploadAdapter from '@ckeditor/ckeditor5-upload/src/adapters/simpleuploadadapter';

// 移除默认的SimpleUploadAdapter，防止冲突
ClassicEditor.builtinPlugins = ClassicEditor.builtinPlugins.filter(
  plugin => plugin !== SimpleUploadAdapter
);
// 添加Base64上传适配器
ClassicEditor.builtinPlugins.push(Base64UploadAdapter);

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",
            "|",
          ],
          // 可选配置：图片工具栏，支持调整样式、添加替代文本
          image: {
            toolbar: [
              'imageTextAlternative',
              'imageStyle:inline',
              'imageStyle:block',
              'imageStyle:side'
            ]
          }
        }}
      />
    );
  }
}
export default RichText;

3. 特殊情况处理 #

如果运行后仍提示模块重复，说明你的预构建版本未包含SimpleUploadAdapter，直接替换为以下代码添加适配器：

// 仅在插件未被包含时添加，避免重复注册
if (!ClassicEditor.builtinPlugins.includes(Base64UploadAdapter)) {
  ClassicEditor.builtinPlugins.push(Base64UploadAdapter);
}

效果验证 #

配置完成后，上传图片时编辑器会自动将图片转换为Base64编码嵌入HTML内容，通过editor.getData()获取的内容可直接存入数据库。

内容的提问来源于stack exchange，提问作者Luis Rotoly