本文实例讲述了ckeditor 4 扩展插件制作。分享给大家供大家参考，具体如下：
今天让我们来探索一下ckeditor的扩展功能，换句话说就是自定义按钮，以及点击按钮之后实现的功能。
要实现自定义按钮，我们要做几个事情：
。
我要评论plugins目录下建立我们和自定义插件同名的目录，并且在里面建立一个叫plugin.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 ) {
config.extraplugins="myplug"; //增加了我们的自定义插件
config.toolbar = 'full';
config.toolbar_full =
[
{ 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' ] },
];
};
在这里我们只加了两行，一行是config.extraplugins="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',
}
]
}
],
onload: function () {
//alert('onload');
},
onshow: function () {
//alert('onshow');
},
onhide: function () {
//alert('onhide');
},
onok: function () {
//点击 确定 按钮之后触发的事件
var name = this.getvalueof( 'user', 'name' );
//从界面上取值的方法，getvalueof( 'contents的id', '控件的id' )
editor.inserthtml('<p>' + name + ' : hello world!' + '</p>');
//将内容放入到editor
this.commitcontent();
},
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错误与调试技巧总结》、《javascript操作xml文件技巧总结》、《javascript中json操作技巧总结》、《javascript数据结构与算法技巧总结》、《javascript遍历算法与技巧总结》及《javascript数学运算用法总结》
希望本文所述对大家javascript程序设计有所帮助。
如对本文有疑问， 点击进行留言回复！！
selenium + ajax抓取英雄联盟全部英雄的详细信息及多线程保存全部皮肤图片到本地
网友评论