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