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

此時，在圖片的右鍵菜單中就會加入我們自定義的圖片裁剪插件了

點擊右鍵菜單中的圖片裁剪插件，會出現圖片裁剪的裁剪框

至此，自定義的插件在右鍵菜單中添加成功了！