CKEditor4 自定义插件

1、准备工作，在ckeditor/plugins/ 中创建相关文件，如下所示，

dialogs
- commonfile.js ：弹出框内容文件
commonfile.png ：插件图标，16*16的png文件，
plugin.js ：插件定义文件

2、完善 plugin.js：插件定义文件

参考内容如下

(function(){
    //Section 1 : 按下自定义按钮时执行的代码
    var a= {
     exec:function(editor){
      alert("This a custome button!");
     }
    },
    //Section 2 : 创建自定义按钮、绑定方法
    b='commonfile'; //注意commonfile名字
    CKEDITOR.plugins.add(b,{
     init:function(editor){
      CKEDITOR.dialog.add('commonfileDialog', this.path + 'dialogs/commonfile.js'); //注意commonfile名字
      editor.addCommand('commonfile', new CKEDITOR.dialogCommand('commonfileDialog')); //注意commonfile名字
      //注意commonfile名字 和 图片路径
      editor.ui.addButton('commonfile',{
       label:'打开公共文件选择框',
       icon: this.path + 'commonfile.png',
       command:b
      });
     }
    });
   })();

3、完善commonfile.js ：弹出框内容文件

参考内容如下

(function () {
    function commonfileDialog(editor) {
    return {
     title: '公共文件选择器', //窗口标题
     minWidth: 650,
     minHeight: 450,
     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: 'commonfileCotentTab1',   //contents的id
        label: '',
        title: '',
       elements:    //定义contents中的内容，我们这里放一个文本框，id是name
       [
        {
         id: 'name',
         type: 'html',
         html: '<iframe src="/community/apps/commonFileSet/index?communityFlag=configuration&appFlag=common-file&pageType=selector&callbackName=coverSelectOne" style="width:100%; height:550px; border:none;"></iframe>',
        }
       ]
      }
     ],
     onLoad: function () {
         var that = this;
      //alert('onLoad');
        window.coverSelectOne = function ( url) {
            console.log(url);
            editor.insertHtml('<img src="'+url+'"/><br />');
            that.commitContent();
        };
     },
     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('commonfileDialog', function (editor) {
    return commonfileDialog(editor);
   });
  })();

4、在初始化ckeditor的时候加入插件

CKEDITOR.replace('@contentId',{
    removeButtons: removeButtons,
    filebrowserImageUploadUrl: '/api/xxxx/xxxx?',
    extraPlugins: 'codesnippet,commonfile', // 这里，加入
    codeSnippet_theme: 'zenburn',
    height: that.height
});

注意：各个文件中，插件名称必须保持一致（其实就是互相调用的关系，保持一致即可，否则会找不到相关方法或者参数）

建议：使用vscode进行文件创建

参考：https://www.jb51.net/article/163313.htm

站点公众号