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: '
第一个简单的插件!
'                            }                        ]                    }                ]            };        });        //插件的逻辑主体再次被封装, 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: '
第一个简单的插件!
'                            }                        ]                    }                ]            };        });        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的插件开发里面还有好多东西需要研究, 等搞明白了在和大家分享.