自定義CKeditor上傳圖片按鈕

背景：之前公司的項目中用的是KindEditor富文本編輯器，後來發現有上傳漏洞，所以項目中用了CKeditor富文本編輯器。But 發現自帶的上傳圖片按鈕並不能將上傳的圖片保存到服務器上，So 下面就來說一說如何在CKeditor中自定義上傳圖片按鈕。

1. CKeditor官網下載：https://ckeditor.com/ckeditor-4/download/
2. 步驟：

1).下載後解壓，將整個文件夾放在項目中，如下圖：

2).打開config.js配置文件，修改原有的工具欄配置，將自帶的上傳圖片按鈕EasyImageUpload修改爲自定義的按鈕SimpleUpload（注意：大小寫），然後註冊自定義按鈕，如下圖：

3).在plugins文件下新建一個simpleupload文件夾，如下圖：

4).在simpleupload文件夾下添加相關配置，如下圖

5).plugin.js代碼如下：

(function () {
    b = 'simpleupload';   //在config.js配置文件中寫的註冊自定義按鈕名稱
    CKEDITOR.plugins.add(b, {
        requires: ["dialog"],
        init: function (a) {
            a.addCommand(b, new CKEDITOR.dialogCommand(b));
            a.ui.addButton("SimpleUpload", {  //注意這裏SimpleUpload是大寫的，是在config.js中配置按鈕名稱
                label: "上傳圖片",  //鼠標放在按鈕上時顯示提示
                command: b,
                icon: this.path + "images/upload.png"   //自定義上傳按鈕圖片，放在在simpleupload文件夾下的images文件夾中

            });
            CKEDITOR.dialog.add(b, this.path + "dialogs/simpleupload.js")   //添加上傳圖片配置腳本，放在simpleupload文件夾下dialogs文件夾中
        }
    })
})(); 

6).simpleupload.js代碼如下：

(function () {
    CKEDITOR.dialog.add("simpleupload",
    function (a) {
        console.log(a);
        return {
            title: "上傳圖片",
            minWidth: 300,  //彈出框的最小寬度
            minHeight: 80,   //彈出框的最小高度
            contents: [{
                id: "tab1",
                label: "",
                title: "",
                expand: true,
                padding: 0,
                elements: [{
                    type: "html",
                    html: initImageDlgInnerHtml(a.name) //對話框中要顯示的內容，a.name:表示的是當前編輯器的id，initImageDlgInnerHtml方法是調用頁面上的js方法（注意：a.name是爲了解決同一個頁面上使用多個編輯器）
                }]
            }],
            onOk: function () {                
                initUploadImage();  //點擊確定按鈕調用頁面上的js方法
            },
            onLoad: function () {
                //彈出框中默認的按鈕爲【確定】和【取消】，這裏將【確定】按鈕的文字爲【上傳】，鼠標懸停時顯示也爲上傳
                $('.cke_dialog_ui_button_ok > .cke_dialog_ui_button').text('上傳');
                $('.cke_dialog_ui_button_ok').attr('title', '上傳');
            }
        }
    })
})();

7).在頁面上的使用

➀.引用腳本：

<script src="@Url.Content("~/CKeditor/ckeditor.js")" type="text/javascript"></script>

➁.頁面上使用：

<textarea id="Content" name="Content" style="height: 200px; width: 640px; "></textarea>

<script type="text/javascript">
    CKEDITOR.replace('Content', {
        height: 200,   //設置編輯器初始高度
        //removePlugins: "simpleupload"   //如果不需要上傳圖片按鈕，加上這行代碼即可
    });
</script>

➂.對話框顯示的方法initImageDlgInnerHtml

//在彈出框中加入html（參數id：是simpleupload.js腳本傳遞過來的，用於上傳圖片成功後返回的圖片插入到當前編輯器的id中，這裏只有多個編輯器時才需用到）
var ckeditorId; //定義當前上傳的圖片的編輯器ID爲全局變量
function initImageDlgInnerHtml(id) {
    ckeditorId = id;
    var content = '<a style="cursor:pointer;display:inline-block;padding: 4px;border: 1px solid #bcbcbc;background: #f8f8f8;" οnclick="triggerFileEvent()">選擇圖片</a>&emsp;<span id="imgName"></span>';
    return content;
}

➃.上傳成功後將將圖片插入到編輯器中，如下圖：

以上就是在CKeditor自定義上傳圖片按鈕