CKeditor插件开发流程(一)

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

                }

            }

        }

    };

})();

以上内容来自:http://blog.csdn.net/qbg19881206/article/details/14224785

 

 

 

你可能感兴趣的:(ckeditor)