⼿把⼿教你CKEDITOR4扩展插件制作
本⽂实例讲述了CKEDITOR 4 扩展插件制作。分享给⼤家供⼤家参考，具体如下：
今天让我们来探索⼀下ckeditor的扩展功能，换句话说就是⾃定义按钮，以及点击按钮之后实现的功能。
要实现⾃定义按钮，我们要做⼏个事情：
1、准备⼀个图标，最好是16*16⼤⼩的png格式图⽚，你没有的话，姜哥帮你准备了⼀张。
2、在plugins⽬录下建⽴我们和⾃定义插件同名的⽬录，并且在⾥⾯建⽴⼀个叫plugin.js的⽂件。
3、在我们⾃⼰的插件⽬录中，建⽴⼀个dialogs⽬录，并且在⾥⾯新建⼀个与我们插件同名的js⽂件，实现插件的功能。
动⼿！
1、建⽴相应的⽂件夹和⽂件，姜哥在ckeditor/plugins/下新建了⼀个myplug⽬录，将来我的插件就叫myplug
2、编辑plugin.js⽂件，填⼊以下内容，特别要注意⾥⾯的名字前后保持⼀致，后期运⾏有问题，多半是名字写错了：
(function(){
/
/Section 1 : 按下⾃定义按钮时执⾏的代码
var a= {
exec:function(editor){
alert("This a custome button!");
}
},
//Section 2 : 创建⾃定义按钮、绑定⽅法
b='myplug'; //注意myplug名字
CKEDITOR.plugins.add(b,{
init:function(editor){
CKEDITOR.dialog.add('myplugDialog', this.path + 'dialogs/myplug.js'); //注意myplug名字
editor.addCommand('myplug', new CKEDITOR.dialogCommand('myplugDialog')); //注意myplug名字
//注意myplug名字和图⽚路径
editor.ui.addButton('myplug',{
label:'打开我的插件',
icon: this.path + 'myplug.png',
command:b
});
}
});
})();
3、配置config.js中的toolbar，将⾃定义插件显⽰出来：
CKEDITOR.editorConfig = function( config ) {
[
{ name: 'custome_plugin', items : [ 'myplug'] }, //将⾃定义插件加⼊toolbar
{ name: 'insert', items : [ 'upload','album','-','Table' ] },
{ name: 'clipboard', items : [ 'Cut','Copy','Paste','PasteText','PasteFromWord','-','Undo','Redo' ] },
{ name: 'basicstyles', items : [ 'Bold','Italic','Underline','Strike','Subscript','Superscript' ] },
{ name: 'paragraph', items : [ 'NumberedList','BulletedList','-','-','Blockquote',
'-','JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock' ] },
{ name: 'colors', items : [ 'TextColor','BGColor' ] },
{ name: 'document', items : [ 'Source' ] },
];
};
在这⾥我们只加了两⾏，⼀⾏是aPlugins="myplug"；这个向ckeditor注册了我们的⾃定义插件，告诉ckeditor还有我们的这个myplug这么个东西；另⼀⾏是{ name: 'custome_plugin', items : [ 'myplug'] },⽤来配置toolbar，让ckeditor将我们的按钮显⽰出来，注意后⾯的逗号，不要漏了噢。
保存之后，看⼀下运⾏效果，图标出来了，可是点击以后⼀闪⽽过，那是因为我们还没有开发对应的dialog代码：
注意：如果⼤家这⼀步失败了，可以尝试从两个⽅⾯排查：
①、前⾯我⼀再强调的，名字有没有弄错；
②、也许是⽂件编码的问题，尝试把所有的中⽂都删掉，换成英⽂试试。
4、开发dialogs/myplug.js，实现业务功能
在myplug/dialogs/新建⼀个叫myplug.js的⽂件，这个其实和前⾯⼀步中，plugin.js⽂件中的这⼀⾏是对应的：
CKEDITOR.dialog.add('myplugDialog', this.path + 'dialogs/myplug.js'); //注意myplug名字
在那个⽂件中，其实指定了我们dialog⽂件的⽬录和⽂件名，理论上是可以随意的，但是为了容易管理，墙裂建议⼤家搞成⼀样的，不要给⾃⼰制造⿇烦~来看⼀下，我们要在myplug.js⾥写什么：
(function () {
function myplugDialog(editor) {
return {
title: 'Who does you want to say hello?', //窗⼝标题
minWidth: 300,
minHeight: 80,
buttons: [{
type: 'button',
id: 'someButtonID',
label: 'Button',
onClick: function () {
alert('This is a custome button');
}
//对话框底部的⾃定义按钮
},
CKEDITOR.dialog.okButton, //对话框底部的确定按钮
CKEDITOR.dialog.cancelButton], //对话框底部的取消按钮
contents: //每⼀个contents在对话框中都是⼀个tab页
[
{
id: 'user', //contents的id
label: 'You name',
title: 'You name',
elements: //定义contents中的内容，我们这⾥放⼀个⽂本框，id是name
[
{
id: 'name',
type: 'text',
style: 'width: 50%;',
label: 'You name',
}
]editor bar
}
],
onLoad: function () {
//alert('onLoad');
},
onShow: function () {
//alert('onShow');
},
onHide: function () {
//alert('onHide');
},
onOk: function () {
//点击确定按钮之后触发的事件
var name = ValueOf( 'user', 'name' );
//从界⾯上取值的⽅法，getValueOf( 'contents的id', '控件的id' )
editor.insertHtml('<p>' + name + ' : Hello world!' + '</p>');
//将内容放⼊到editor
thismitContent();
},
onCancel: function () {
//alert('onCancel');
},
resizable: CKEDITOR.DIALOG_RESIZE_HEIGHT
};
}
CKEDITOR.dialog.add('myplugDialog', function (editor) {
return myplugDialog(editor);
});
})();
在上⾯这段程序⾥，我们⾸先定义了⼀个myplugDialog，并且给他设置了标题、最⼩宽度、最⼩⾼度，然后⼜添加了⼀个tab页，在⾥⾯放了⼀个对话框。在程序的底部，我们把这个对话框注册到ckeditor中去，这样前端点击按钮，才可以调⽤到这个对话框。
常见错误：
1、名字没有匹配，再次强调⼀下，这⾥⾯myplugDialog千万千万要前后⼀致，⽽且，要和plugin.js中的名称⼀致！
2、中⽂的问题，如果出现点击没有效果，⼤家可以⾸先尝试，将我这段代码中，所有的中⽂都删掉试试。或者⽤另外的⽅法，转换⼀下编码格式，在Notepad++中，可以这样：
⽤我标红的两个选项试试看，⼀般都是可以的，重新保存之后，再次运⾏：
点击我们的插件后，出来⼀个对话框，填⼊我的名字，姜哥，再按确定。
我们填⼊的内容就被插⼊到当前光标处了！
好了，今天我们学习了ckeditor的⾃定义插件，以及插件中内容的交互。内容还是⽐较多的，⼤家也可能会碰到各种问题，姜哥再这⾥再唠叨两句，问题⼀般都是两种原因引起的：
①、名称前后不⼀致；
②、中⽂编码格式引起的乱码。
完整实例代码点击此处。
更多关于JavaScript相关内容感兴趣的读者可查看本站专题：《》、《》、《》、《》、《》及《》
希望本⽂所述对⼤家JavaScript程序设计有所帮助。
发表评论