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

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

本節只講在CKEditor實現服務器圖片的插入插件實現方法。

CKEditor版本是 ## CKEditor 4.4.4

第一、定義插件

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

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

CKEDITOR.plugins.add(
    "serverimg",
    {
        requires: ["dialog"],
        lang: ["en"],
        init: function (editor) {
            editor.addCommand("serverimg", new CKEDITOR.dialogCommand("serverimg"));
            editor.ui.addButton(
             "serverimg",
            {
                label: "插入服務端圖片",
                command: "serverimg",
                icon: this.path + "images/pic.png",
                toolbar: ‘insert‘
            });
            CKEDITOR.dialog.add("serverimg", this.path + "dialogs/code.js");
        }
    }
);

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

第二、定義插件中的對話框內容

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

2.在dialogs文件內，分別創建code.js (用於執行彈出對話框執行的js代碼)和PicPreview.html（用於瀏覽服務器圖片）

3.code.js 代碼如下

CKEDITOR.dialog.add(
    "serverimg",
    function (editor) {
        var timestamp = Math.round(new Date().getTime() / 1000);
        var ckeditorPage = ‘../../ImgMgr/ImgBrowser.aspx?from=ckeditor&timestamp=‘ + timestamp;
        return {
            title: "插入代碼",
            minWidth: 800,
            minHeight: 600,
            contents:
            [
                {
                    id: "tab1",
                    label: "",
                    title: "",
                    expand: true,
                    padding: 0,
                    elements:
                    [
                            {
                                type: "html",
                                html: "<iframe id=‘img_browser‘name=‘img_browser‘ src=‘" + ckeditorPage + "‘></iframe>",
                                style: "width:100%;height:600px;padding:0;"//  style=‘width:800px;height:600px‘
                            }
                    ]
                }
            ],
            onOk: function () {                

                //插入富文本編輯器內容 window.frames["img_browser"].document.getElementById("hf_imgsrc");//
                var hf =  document.getElementById(‘img_browser‘).contentWindow.document.getElementById("hf_imgsrc");
                if (hf != null) {
                    var imgSrc = hf.value;                   
                    editor.insertHtml("<img src=‘" + imgSrc + "‘ />"); //將select插入編輯器

                } else {
                    alert("hf is null");
                }
               
            },
            //onHide: function () { document.getElementById(‘img_browser‘).contentDocument.location.reload(); },
            //resizable: CKEDITOR.DIALOG_RESIZE_HEIGHT
        };
    }
);

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

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

第三、配置插件

上面的插件開發完成後，頁面上並不會顯示我們開發的插件，還需要配置下config.js

找到ckeditor文件下的config.js 打開

在配置裏面增加

config.extraPlugins = ‘serverimg‘;

第四、最終效果

CKEditor 自定義按鈕插入服務端圖片