CKeditor插件开发流程

来源：互联网发布：nginx cookie 灰度编辑：程序博客网时间：2024/06/10 06:59

1.放在多文件中

第一步：config.js中

config.extraPlugins = '插件名称';//注册插件,extraPlugins只允许出现一次，你如果之前有新增别的插件，那么用逗号分隔

第二步：plugins文件夹下新建：插件名称文件夹
第三步：
1:在plugins/插件名称/下新建plugin.js;
2:在plugins/插件名称/下新建 dialogs文件夹，并在其内新建 "插件名称.js"

(function() {    CKEDITOR.plugins.add("插件名称", {        requires: ["dialog"],        init: function(a) {            a.addCommand("插件名称", new CKEDITOR.dialogCommand("插件名称"));            a.ui.addButton("插件名称", {                label: "插件名称",//调用dialog时显示的名称                command: "插件名称",                icon: this.path + "g.ico"//在toolbar中的图标            });            CKEDITOR.dialog.add("插件名称", this.path + "dialogs/插件名称.js")        }    })})();

第四步：/plugins/插件名称/dialogs/插件名称.js 内容如下：

(function() {    CKEDITOR.dialog.add("插件名称",     function(a) {        return {            title: "插件名称",            minWidth: "500px",            minHeight:"500px",            contents: [{                id: "tab1",                label: "",                title: "",                expand: true,                width: "500px",                height: "500px",                padding: 0,                elements: [{                    type: "html",                    style: "width:500px;height:500px",                    html: '内容测试'                }]            }],            onOk: function() {                //点击确定按钮后的操作                //a.insertHtml("编辑器追加内容");            }        }    })})();

2、放在单个plugin.js中
第一步：config.js中

config.extraPlugins = 'clearempty';//注册插件,extraPlugins只允许出现一次，你如果之前有新增别的插件，那么用逗号分隔

第二步：plugins文件夹下新建：clearempty 文件夹
第三步：在plugins/clearempty/下新建plugin.js；内容如下:

(function() {    CKEDITOR.plugins.add('clearempty', {        requires: ['styles', 'button'],        init: function(a) {            a.addCommand('clearempty', CKEDITOR.plugins.clearempty.commands.clearempty);            a.ui.addButton('clearempty', {                label: "清除空行",                command: 'clearempty',                icon: this.path + "g.ico"//这个g.ico是你的插件图标，放在同目录下            });        }    });    CKEDITOR.plugins.clearempty = {        commands: {            clearempty: {                exec: function(a) {                    var _html = a.getData();                    //在这里执行你将_html中的空行替换掉的操作                       a.setData(_html);                }            }        }    };})();