ckeditor自定義插件--一鍵給所有的圖片添加鏈接

　　ckeditor自定義插件在網上查了查，感覺還是比較好用的，寫了一個一鍵給編輯器中的所有圖片添加鏈接。

　　在ckeditor目錄下的plugins下建以插件為名的文件夾，在里邊建plugin.js文件，再建立一個dialogs文件夾，里邊建一個插件名.js文件。我的插件名為alink，目錄結構：

images文件夾里邊放按鈕圖標，當然也可以不要用文字顯示。

alink.js:

(function() {
    CKEDITOR.dialog.add("alink", 
    function(a) {
        return {
            title: '一鍵添加圖片鏈接',
            minWidth: 300,
            minHeight: 100,
            contents: [              
                {
                    id: 'alink',
                    label: 'code1',
                    title: 'code1',
                    elements: //elements是定義dialog內部的元件
                        [
                            {
                                id: 'alinkcontent',
                                type: 'text',
                                label: '請輸入圖片鏈接',
                                'default': ''
                            }   
                        ]
                }
            ],
            onOk: function() {
                //點擊確定按鈕后的操作  
                alink = this.getValueOf('alink', 'alinkcontent');
                var content=a.getData();
                var Re=/(<img[^>]*>)/gi;
                content=content.replace(Re,'<a href='+alink+'>$1</a>');
                console.log(content)
                a.setData(content)
            }
        }
    })
})();

plugin,js:

(function() {
    CKEDITOR.plugins.add("alink", {
        requires: ["dialog"],
        init: function(a) {
            a.addCommand("alink", new CKEDITOR.dialogCommand("alink"));
            a.ui.addButton("alink", {
                label: "一鍵添加圖片鏈接",//調用dialog時顯示的名稱
                command: "alink",
                icon: this.path + "images/alink.jpg"//在toolbar中的圖標
            });
            CKEDITOR.dialog.add("alink", this.path + "dialogs/alink.js")
        }
    })
})();

之后再在ckeditor中的config.js中添加一行代碼：config.extraPlugins="alink";//注冊插件，之后就可以在頁面看到了。當然這時如果有圖片就是圖片圖標顯示，如果沒有圖片就是空白，用文字（顯示文字是plugin.js里邊的label內容）顯示需要在插入編輯器的頁面上添加如下css代碼：

/*批量添加鏈接*/
.cke_button__alink .cke_button_icon{ 
       display:none !important; 
 }
.cke_button__alink .cke_button_label { 
       display:inline !important; 
}

一鍵導入微信文章也是一樣的做法，但這個需要后端一起實現。