如何在Angular中使用CKEditor4 easyimage插件将图片存入数据库？

先说明那两个云服务配置的作用 #

EasyImage是CKEditor官方专为对接其云存储设计的插件，cloudServices_uploadUrl和cloudServices_tokenUrl都是用来和官方云交互的：

• cloudServices_uploadUrl：指向CKEditor官方云的上传接口，默认会把图片传到官方云服务器
• cloudServices_tokenUrl：用来获取官方云的授权令牌，验证上传权限，防止非法请求

能不能直接上传到自己的服务器/数据库？ #

完全可以，但不能直接用你的API URL替换这两个配置项——因为EasyImage的默认逻辑是绑定官方云服务的，直接换URL会出现兼容性问题。给你两种可行的实现方案：

方案1：自定义EasyImage上传适配器

保留EasyImage插件，重写它的上传逻辑，让它调用你的后端API：

1. 删除配置里的cloudServices_uploadUrl和cloudServices_tokenUrl
2. 编写自定义上传适配器，实现图片上传到你的后端，并返回编辑器需要的图片信息
3. 在CKEditor初始化时注册这个适配器

Angular环境下的示例代码：

// 自定义适配器类
class CustomEasyImageAdapter {
  constructor(private loader: any) {}

  // 实现上传逻辑
  upload() {
    return this.loader.file.then((file: File) => {
      const formData = new FormData();
      formData.append('image', file);

      return fetch('你的后端上传API地址', {
        method: 'POST',
        body: formData,
        headers: {
          // 这里添加你的认证头，比如 `Authorization: Bearer ${token}`
        }
      }).then(res => {
        if (!res.ok) throw new Error('上传失败');
        return res.json();
      }).then(data => {
        // 后端需返回图片访问URL，格式要符合EasyImage要求
        return { default: data.imageUrl };
      });
    });
  }

  // 可选：实现取消上传逻辑
  abort() {}
}

// 组件中的CKEditor配置
export class YourEditorComponent {
  ckEditorConfig = {
    title: '',
    toolbar: [
      // 保留你原有工具栏配置，包括'EasyImageUpload'
      { name: 'insert', items: ['EasyImageUpload'] },
      // ...其他工具栏项
    ],
    height: 'calc(100vh - 340px)',
    extraPlugins: 'format, font, colorbutton, justify, easyimage',
    removePlugins: 'image',
    // 插件加载完成后注册适配器
    onPluginsLoaded: (editor: any) => {
      editor.plugins.get('EasyImage').uploadRepository.registerAdapter('custom', loader => {
        return new CustomEasyImageAdapter(loader);
      });
    }
  };
}

方案2：换回原生Image插件 + 自定义适配器

如果觉得自定义EasyImage的逻辑太繁琐，更简单的方式是用CKEditor原生的image插件，搭配自定义上传适配器：

1. 修改配置：移除easyimage插件，删除removePlugins: 'image'，把工具栏里的EasyImageUpload换成Image
2. 编写上传适配器，处理图片上传到你的后端

示例代码：

// 自定义图片上传适配器
class CustomImageAdapter {
  constructor(private loader: any) {}

  upload() {
    return this.loader.file.then((file: File) => {
      const formData = new FormData();
      formData.append('image', file);

      return fetch('你的后端上传API地址', {
        method: 'POST',
        body: formData,
        headers: {
          // 添加你的认证头
        }
      }).then(res => {
        if (!res.ok) throw new Error('上传失败');
        return res.json();
      }).then(data => {
        return { url: data.imageUrl };
      });
    });
  }

  abort() {}
}

// 组件配置
export class YourEditorComponent {
  ckEditorConfig = {
    title: '',
    toolbar: [
      // ...原有工具栏项，替换成Image
      { name: 'insert', items: ['Image'] },
    ],
    height: 'calc(100vh - 340px)',
    extraPlugins: 'format, font, colorbutton, justify',
    // 编辑器就绪时注册适配器
    onReady: (editor: any) => {
      editor.plugins.get('FileRepository').createUploadAdapter = (loader) => {
        return new CustomImageAdapter(loader);
      };
    }
  };
}

后端注意事项 #

• 你的API需要接收multipart/form-data格式的文件，把图片保存到数据库（比如BLOB字段）或者文件系统
• 如果存在数据库，建议后端提供一个单独的接口，根据图片ID返回图片流，前端用这个接口的URL作为图片地址
• 要做图片格式、大小校验，避免上传恶意文件或过大的图片

内容的提问来源于stack exchange，提问作者Prshant Sharma