本文的例子讲述了CKEDITOR 4扩展的制作。分享给大家参考，如下：

今天，我们来探索ckeditor的扩展功能，换句话说，就是自定义按钮和点击按钮后实现的功能。

要实现自定义按钮，我们必须做几件事：

1.准备一个图标，最好是大小为16*16的png格式图片。如果你没有，江歌给你准备了一个。2.在plugins目录下创建一个与我们的自定义插件同名的目录，并在其中创建一个名为plugin.js的文件。3.在我们自己的插件目录中，构建一个dialogs目录，并创建一个与我们的插件同名的新js文件来实现插件功能。动手吧！

1.建立相应的文件夹和文件。江歌在ckeditor/plugins/，下创建了一个新的myplug目录，我的插件以后会叫my plug

2.编辑plugin.js文件并填写以下内容。特别注意里面名字的一致性，后期操作有问题，大部分都是错别字：

(function(){ //Section 1 :按下自定义按钮时要执行的代码var a={ exec : function(editor){ alert('这是自定义按钮！');} }，//Section 2 :创建自定义按钮并绑定方法b=' myplug//注意my plug name cke ditor . plugins . add(b，{ init : function(editor){ cke ditor . dialog . add(' my plug dailog '，这个。路径“dialogs/my plug . js”)；//关注myplug名称编辑器。addcommand('我的插头'，新ckeditor。dialog command(' myplug dialog ')；//关注myplug名称//关注myplug名称和图片路径editor.ui.addbutton ('myplug '，{label: '打开我的插件'，icon:this.path' myplug.png '，command 3360 b })；} });})();3.在config.js中配置工具栏并显示自定义插件：

ckeditor . editorconfig=function(config){ config . extra plugins=' my plug '；//添加了我们的自定义插件config.toolbar=' Fullconfig . toolbar _ full=[{ name : ' custom _ plugin '，item :[' my plug ']}，//将自定义插件添加到工具栏{name3360' insert '，item :[' upload '，' album '，'-'，' Table' ] }，{ name: 'clipboard '，item :[' Cut '，' Copy '，' PasteText '，' PasteFromWord '，'-'，' Undo '，' Redo' ] }，{ name 3: ' basis};这里我们只添加两行，一行是config . extra plugins=' my plugin '；这个用ckeditor注册了我们的自定义插件，告诉ckeditor有一个东西是我们的myplug另一行是{name:' custome _ plugin '，item :[' my plugin ']}，用于配置工具栏，并让ckeditor显示我们的按钮。注意后面的逗号，不要漏掉。

保存后看运行效果，图标出来了，但是点击后就闪了，因为我们还没有开发相应的对话框代码：

注意：如果这一步失败，可以尝试从两个方面进行检查：

(1)、我前面已经反复强调过，名字不对；(2)可能是文件编码问题。尽量删掉所有中文，改成英文。

4.开发dialog/my plug . js实现业务功能

在my plug/dialog/中创建一个名为myplug.js的新文件，它实际上对应于上一步中plug.js文件中的这一行：

ckeditor . dialog . add(' my plug dialog '，this . path ' dialogs/my plug . js ')；//请注意，myplug的名称在那个文件中，它实际上指定了我们的对话框文件的目录和文件名。理论上可以任意，但为了便于管理，建议大家做同样的事情，不要给自己制造麻烦~我们来看看。我们应该在myplug.js中写什么：

(function(){ function mypluggdialog(editor){ return { title : '你想和谁打招呼？//窗口标题minwidth : 300、min have : 80、按钮： [{type :' button '、id :' some button '、标签:' button '、onclick 3360 function () {alert('这是自定义按钮')}//对话框底部的自定义按钮}、CKEDITOR.dialog.okButton、//对话框底部的确定按钮CKEDITOR.dialog.cancelButton]、//取消按钮title :' you name '，elements 3360//定义了contents中的内容，我们在这里放了一个文本框，其id为name [{id:' name '，type:' text '，style : ' width 3360 50%；' ，label: 'You name '，} ] } ]，onLoad : function(){//alert(' onLoad ')；}，onShow:函数(){//alert(' onShow ')；}，onHide:函数(){//alert(' onHide ')；}，onOk:函数(){//单击Ok按钮后触发的事件var name=this。getvalueof ('user '，' name ')；//从接口获取值的方法，getValueOf('contents id '，' control id ')editor . insert html(' p ' name ' : hello world！'/p ')；//将内容放入编辑器this.commitcontent()；}，onCancel:函数(){//alert(' onCancel ')；}，resizable: CKEDITOR。DIALOG _ RESIZE _ HEIGHT }；} ckeditor . dialog . add(' myplug dialog '，函数(编辑器){ return myplugDialog(编辑器)；});})();在上面的程序中，我们首先定义了一个myplugDialog并设置了它的标题、最小宽度和最小高度，然后添加了一个里面有对话框的标签页。在程序的底部，我们在ckeditor中注册这个对话框，这样我们就可以通过点击前端的按钮来调用这个对话框。

常见错误：

1.名字不匹配。同样，myplugDialog必须与plugin.js中的名称保持一致和一致！

2.中文有问题。如果点击不起作用，可以先试试，把我代码里的中文全部删除。或者使用另一种方法转换编码格式。在记事本中，它可以是这样的：

用我的两个红色选项试试，一般都可以。再次保存后，再次运行：

点击我们的插件后，会出现一个对话框，填写我的名字，江哥，然后按OK。

我们填写的内容被插入到当前光标中！

好了，今天我们学习了ckeditor的定制插件以及插件中内容的交互。内容还是很多的，大家可能会遇到各种各样的问题。江哥又要在这里唠叨了。这些问题通常由两个原因引起：

(1)名称不一致；中文编码格式造成的乱码。

单击此处下载完整的示例代码。

更多对JavaScript相关内容感兴趣的读者可以查看本网站专题：《JavaScript错误与调试技巧总结》、《JavaScript操作XML文件技巧总结》、《JavaScript中json操作技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》、《JavaScript数学运算用法总结》、0103010

希望本文对JavaScript编程有所帮助。