解決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":' ',
});