• 编辑器提供跨前端框架的,通用右键菜单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) {
    console.warn("用户自定义 右键菜单");
    currentMenu.push(
      {
        action: "userDefine1",
        text: "用户自定义1",
        enable: true,
      },
      {
        action: "userDefine2",
        text: "用户自定义2",
        enable: true,
      }
    );

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