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;
}

一键导入微信文章也是一样的做法，但这个需要后端一起实现。