CkEditor 插件开发

CKEditor的插件开发其实很简单只需要两步.1.通过CKEditor.plugins.add()方法编写插件的逻辑主体, 2.告诉CKEditor我们有一个自定义插件需要添加进来.

//创建插件逻辑主体,并为插件起个响亮的名字
CKEDITOR.plugins.add('myplugin', {
    init: function () {
        alert('第一个简单的插件!');
    }
});
//告诉CKEDITOR我们有定义了一个插件.
CKEDITOR.replace('editor1', {
    extraPlugins: 'myplugin'
});

这个插件会在页面加载完成后执行, 当然我们一般会为插件创建一个按钮, 当有需要的时候我们去执行插件,下面就给插件添加一个按钮,同样还是在CKEditor.plugins.add()完成这些事情,那么按钮和我们的插件是如何建立联系的呢,CKEditor是通过一个叫'命令'的机制来完成的.

CKEDITOR.plugins.add('myplugin', {
    init: function (editor) {
        //创建一个按钮, editor代表ckeditor编辑框实例
        editor.ui.addButton('mybutton', {
            lable: 'FButton',
            title: 'My Button',
            command: 'mycommand'  //通过命令的方式连接
        });
        //插件的逻辑主体写在命令里面, 并给他起个响亮的名字
        editor.addCommand('mycommand', {
            exec: function () {
                alert('第一个简单的插件');
            }
        });
    }
})

光弹出一个alert显然不是太酷, 我们需要自定义一个弹出的对话框.

CKEDITOR.plugins.add('myplugin', {
    init: function (editor) {
        //这里是对话框的主体. 定义一个名为'mydialog'的对话框
        CKEDITOR.dialog.add('mydialog', function (editor) {
            return {
                title: '第一个对话框',
                minWidth: 390,
                minHeight: 130,
                contents: [
                    {
                        id: 'tab1',
                        label: 'Label',
                        title: 'Title',
                        expand: true,
                        padding: 0,
                        elements: [
                            {
                                type: 'html',
                                html: '<p>第一个简单的插件!</p>'
                            }
                        ]
                    }
                ]
            };
        });
        //插件的逻辑主体再次被封装, new CKEDITOR.dialogCommand('mydialog')就是用来弹出名为'mydialog'的对话框.
        editor.addCommand('mycommand', new CKEDITOR.dialogCommand('mydialog'));

        editor.ui.addButton('mybutton', {
            lable: 'FButton',
            title: 'My Button',
            command: 'mycommand'  //通过命令的方式连接
        });
    }
})    

当然我们还可以把这个弹出对话框通过右键上下文菜单打开, 原理也是一样, 通过'命令'的机制绑定.

CKEDITOR.plugins.add('myplugin', {
    init: function (editor) {
        CKEDITOR.dialog.add('mydialog', function (editor) {
            return {
                title: '第一个对话框',
                minWidth: 390,
                minHeight: 130,
                contents: [
                    {
                        id: 'tab1',
                        label: 'Label',
                        title: 'Title',
                        expand: true,
                        padding: 0,
                        elements: [
                            {
                                type: 'html',
                                html: '<p>第一个简单的插件!</p>'
                            }
                        ]
                    }
                ]
            };
        });
        editor.addCommand('mycommand', new CKEDITOR.dialogCommand('mydialog'));

        editor.ui.addButton('mybutton', {
            lable: 'FButton',
            title: 'My Button',
            command: 'mycommand'  //通过命令的方式连接
        });
        //添加上下文菜单项,
        if (editor.contextMenu) {
            editor.addMenuGroup('mymenugroup', 10);
            editor.addMenuItem('mymenuitem', {
                label: '打开对话框',
                command: 'mycommand',   //通过命令的方式绑定
                group: 'mymenugroup'
            });
        }
        //为上下文菜单添加监听器, 如果不添加这句, 我们的创建的上下文菜单将无法显示在右键菜单里面. 原理不详,望指点
        editor.contextMenu.addListener(function (element) {
            return { 'mymenuitem': CKEDITOR.TRISTATE_OFF };
        });
    }
})

关于CKEditor的插件开发里面还有好多东西需要研究, 等搞明白了在和大家分享.