CKeditor自定义右键菜单

CKeditor自定义右键菜单

一、在CKeditor的plugins目录中加入自定义的插件

我加入的是自定义的图片裁剪插件Cropper，目录结构如下：

二、在CKeditor的配置文件config.js中加入自定义的插件

加入自定义的插件，如果有多个自定义的插件，中间已逗号分割

// 加入自定义的插件
config.extraPlugins = 'cropper';

三、效果图

此时，在Ckeditor中就会出现自定义的图片裁剪插件的图标了

上传一张图片，然后在图片上右键，可以看到，此时的右键菜单中是没有我们自定义的图片裁剪插件的

我们需要在图片的右键菜单中加入自定义的图片裁剪插件

四、在右键菜单中加入自定义的图片裁剪 插件

在Cropper目录下的plugin.js中加入以下代码

CKEDITOR.plugins.add( 'cropper', {
    init: function( editor ) {

      editor.ui.addButton( 'cropper', {
        label: '裁剪图片',
        command: 'cropper',
        toolbar: 'insert',
        icon: this.path + 'icons/cropper.png' // 在toolbar中的图标
      });

      editor.addCommand( 'cropper', {
          exec: function( editor ) {
          	// 业务代码
          }
      });

      // 将图片裁剪添加到右键菜单中
      if(editor.addMenuItem) {

        editor.addMenuGroup("cropper");

        editor.addMenuItem("cropper", {
          label: "图片处理",
          icon: this.path + 'icons/cropper.png',
          command: "cropper",
          group: "cropper"
        })
      }

      if(editor.contextMenu) {
        // 监听右键菜单事件
        editor.contextMenu.addListener(function(element) {
          // 如果是在图片上右键，才在右键菜单中显示图片裁剪功能
          if(element.$.localName == "img") {
            return {
              cropper: CKEDITOR.TRISTATE_OFF
            }
          }
        })
      }
    }
});

此时，在图片的右键菜单中就会加入我们自定义的图片裁剪插件了

点击右键菜单中的图片裁剪插件，会出现图片裁剪的裁剪框

至此，自定义的插件在右键菜单中添加成功了！