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的插件开发里面还有好多东西需要研究, 等搞明白了在和大家分享.