如何在Angular项目中集成CKEditor 4的uploadimage上传图片插件

可通过npm安装该插件，具体操作如下 #

• 执行安装命令获取CKEditor4和uploadimage插件包：
  npm install ckeditor4 @ckeditor/ckeditor4-plugin-uploadimage
• 编辑器初始化时添加对应配置，要注意补充你自己的后端图片上传接口地址：

CKEDITOR.replace('editor', {
  // 引入uploadimage插件
  extraPlugins: 'uploadimage',
  // 配置后端上传接口
  imageUploadUrl: '/api/upload/image',
  // 确保没有禁用image、image2等基础图片插件
  removePlugins: ''
})

配置生效后点击图片图标，弹出的窗口就会自动出现选择文件的上传选项。

其他实现方式 #

如果项目未使用npm构建，也可以用以下两种方案实现功能：

• 手动安装插件：将uploadimage插件解压到CKEditor目录的plugins文件夹下，同样在初始化时添加上述插件和上传地址配置即可生效。
• 自定义扩展：如果需要高度自定义上传逻辑，可以直接给原生图片弹窗添加文件选择按钮，监听文件选择事件后自行完成文件上传、校验，拿到返回的图片URL后插入编辑器即可，还可以额外扩展进度提示、格式校验等个性化功能。

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