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

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

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

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

 

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

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

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

便是：

• 上传选项卡内，所渲染的form表单，并不存在action（目标地址）。
• 选择图片文件后，点击上传至服务器，并没有任何响应事件。

奇怪的是，当配置了 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 项便可。

 

解决imgupload组件报错问题

这个问题一搜都有不少的解决方案，缘由就是这个文件自己不是做为一个插件使用的，只是做为一个demo演示服务端上传文件时的执行过程，以及给前端的反馈。

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

 

 

解决预览框默认的英文介绍没法清空。

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

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

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

如：

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