• 编辑器提供跨前端框架的,通用右键菜单Kit组件,可在第3方系统中快速实现右键菜单

step1：应用项目集成开发套件Kits源码

1 拷贝editorKits目录到项目src中

• 示例： ThinkEditor.Vue3.Demo\src\editorKits
  

2 导出右键菜单对象ThinkEditorContextMenu

import { ThinkEditorContextMenu } from "@editorLib/ThinkEditor.Kit.js";

3 配置编辑器使用 外置菜单组件

• 1、禁用内置右键菜单 useInnerMenuBox: false
• 2、为每1个ThinkEditor加载外置右键菜单 new ThinkEditorContextMenu()

对应源码如下，即可实现显示右键菜单：

let editorParam = {
...
useInnerMenuBox: false, //note:启用内置右键菜单。
...
};

let thinkEditor = new ThinkEditor(editorParam);
let ctxMenu = new ThinkEditorContextMenu({thinkEditor: thinkEditor});

使用示例

  let ctxMenu = new ThinkEditorContextMenu({
    thinkEditor: thinkEditor
  });

应用自行封装示例

• 删除某些场景不需要的菜单项
• 新增菜单项

function LoadContextMenu(thinkEditor) {
  let ctxMenu = new ThinkEditorContextMenu({
    thinkEditor: thinkEditor,
  });

  ctxMenu.onCreateMenu = function (currentMenu) {
      //自定义右键菜单项：本方法中，用户增减菜单项，请返回修改后的菜单项。

      /************************************
       * 删除右键菜单项,示例:
       * ***********************************/
      let forbidMenuItems = [
        "knowledge" //禁止显示 知识库
      ];
      currentMenu = currentMenu.filter((item) => !forbidMenuItems.includes(item.action));


      /************************************
       * 新增右键菜单项,示例:
       * ***********************************/
        currentMenu.push(
          {
            action: "userDefine1",
            text: "用户自定义1",
            enable: true,
          },
          {
            action: "userDefine2",
            text: "用户自定义2",
            enable: true,
          }
        );

    return currentMenu;
  };
  ctxMenu.onMenuAction = function (action, index) {
    console.warn(`用户自定义${action}右键菜单被按下`);
  };
}