這篇文章主要為大家詳細介紹了CKEditor自定義按鈕插入服務(wù)端圖片的相關(guān)資料，具有一定的參考價值，感興趣的小伙伴們可以參考一下

方法/步驟

CKEditor 富文本編輯器很好用，功能很強大，在加上支持服務(wù)端圖片上傳的CKFinder更是方便，

最近在使用CKFinder的時候發(fā)現(xiàn)存在很多問題，比如上傳圖片的時候，圖片不能按時間降序排列，另外CKFinder是也是收費的，所以自己想實現(xiàn)一個簡單的類似CKFinder的功能，

本節(jié)只講在CKEditor實現(xiàn)服務(wù)器圖片的插入插件實現(xiàn)方法。

CKEditor版本是 ## CKEditor 4.4.4

第一、定義插件

1.在ckeditor/plugins文件夾下,新建serverimg文件夾，

2.在serverimg下新建plugin.js 文件

小編就不一一演示了，直接放代碼!

3.在serverimg下新建image，里面存放圖標使用的圖片pic.png

第二、定義插件中的對話框內(nèi)容

1.在serverimg中新建dialogs文件夾，

2.在dialogs文件內(nèi)，分別創(chuàng)建code.js (用于執(zhí)行彈出對話框執(zhí)行的js代碼)和PicPreview.html(用于瀏覽服務(wù)器圖片)

3.code.js 代碼如下

4.說明，由于我在彈出的對話框中插入的是一個iframe，src正好是我自己做的一個瀏覽服務(wù)器圖片的頁面，當選中圖片后，點擊對話框中的確定按鈕，即可獲取圖片路徑，

最終包裝成img ，插入到富文本編輯器里面 ，當然你可以做的更好，允許圖片設(shè)置寬度和高度，這里就不在講了。

第三、配置插件

上面的插件開發(fā)完成后，頁面上并不會顯示我們開發(fā)的插件，還需要配置下config.js，找到ckeditor文件下的config.js 打開，在配置里面增加config.extraPlugins = 'serverimg';

第四、最終效果