解决CKEditor 4 富文本编辑器在图片组件无法显示[上传]选项卡的相关问题

2019独角兽企业重金招聘Python工程师标准>>>

关于解决CKEditor 4 富文本编辑器在图片组件无法显示[上传]选项卡的相关问题。

本文可能会对以下现象得以解决：

图片上传组件，没有 [上传] 选项卡。
资源无法加载 [imgupload] ( Uncaught Error: [CKEDITOR.resourceManager.load] Resource name "imgupload" was not found at )
预览框默认的英文介绍，无法清空。

解决图片上传组件没有[上传]选项卡

遇到图片上传组件无法显示上传选项卡，通过网络搜寻，遇到很多解决方案。其中一种便是通过编辑 image.js 源文件修改hidden的值为 false 或者 0 将其开放开来。

这个方案是存在问题的，本着去解决问题方向，去尝试了下。上传选项框成功展现出来了，与此同时出现了其他的问题。

即是：

奇怪的是，当配置了 filebrowserImageUploadUrl 和 filebrowserImageBrowseUrl 的配置项，依然是失效状态。

同时通过查看 image.js 代码内容，也没有引用 filebrowserImageUploadUrl 配置项的地方，唯有一处使用了filebrowserImageUploadUrl。

显然这里这个组件本身是不完善的，或者是还有其他依赖组件并没有加载出来。

后来通过对比官方demo，官方demo是正常加载的，而我自己配置的却出现了很多问题。

官方DEMO https://sdk.ckeditor.com/samples/image.html

即便是我将我的配置基本上和官方配置一致（排除掉我不需要的组件），也会出现同样的问题。

当使用官方demo页引入的CKeditor4.js 时，我自己配置的编辑器一切都恢复正常。通过查看源JS文件，对比得出。

demo中使用的CKeditor4 Standard版本，而我则是采用的最小安装的Basic版本。

对比其加载的组件列表差异有哪些，可通过ckeditor.js文件搜寻 plugins= ，将所得到的值打散为数组列表。

发现一项很可疑的组件，并将其恢复到我的自定义包中，图片编辑器恢复正常，上传功能即可用。

即：filebrowser

官网介绍：https://ckeditor.com/cke4/addon/filebrowser

解决方案：安装filebrowser

最小化安装是不包含这项组件，只要将其打包加入即可，而不需要修改任何文件，最终在初始化组件时配置上 filebrowserImageUploadUrl 项即可。

这个问题一搜都有很多的解决方案，原因就是这个文件本身不是作为一个插件使用的，只是作为一个demo演示服务端上传文件时的执行过程，以及给前端的反馈。

解决方案：修改ckeditor.js，将imgupload排除在外即可。

关于初始化时的配置项和config.js配置项，一般情况下不存在优先级问题，config.js默认是没有关于这项配置的覆盖操作。

往往出现的问题是配置项为空，就会被当做无效配置。

解决方法：将空文本置换为几个空格即可。

如：

CKEDITOR.replace('editor', {
    "image_previewText":' ',
});