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;

}

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

巴特西

ckeditor自定义插件--一键给所有的图片添加链接

最新文章

热门文章