(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
   });
  }
 });
})();

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' ] },
 ];
};

CKEDITOR.dialog.add('myplugDialog', this.path + 'dialogs/myplug.js'); //注意myplug名字

(function () {
  function myplugDialog(editor) {
  return {
   title: 'Who does you want to say hello"" alt="这里写图片描述" src="/UploadFiles/2021-04-02/201906181058469.png">

用我标红的两个选项试试看，一般都是可以的，重新保存之后，再次运行：

点击我们的插件后，出来一个对话框，填入我的名字，姜哥，再按确定。

我们填入的内容就被插入到当前光标处了！
好了，今天我们学习了ckeditor的自定义插件，以及插件中内容的交互。内容还是比较多的，大家也可能会碰到各种问题，姜哥再这里再唠叨两句，问题一般都是两种原因引起的：

①、名称前后不一致；

②、中文编码格式引起的乱码。

完整实例代码点击此处本站下载。
更多关于JavaScript相关内容感兴趣的读者可查看本站专题：《JavaScript错误与调试技巧总结》、《JavaScript操作XML文件技巧总结》、《JavaScript中json操作技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》
希望本文所述对大家JavaScript程序设计有所帮助。