• 编辑器提供 跨前端框架的 通用右键菜单快速实现组件

使用 外置菜单组件

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

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

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

添加菜单项

• 在onCreateMenu回调函数中，在现有菜单项currentMenu的基础上增加自定义项
• action应当唯一

  ctxMenu.onCreateMenu = function (currentMenu) {
    console.warn("用户自定义 右键菜单");
    currentMenu.push(
      {
        action: "userDefine1",
        text: "用户自定义1",
        enable: true,
      },
      {
        action: "userDefine2",
        text: "用户自定义2",
        enable: true,
      }
    );

    return currentMenu;
  };

自定义菜单项-按下事件处理

• 没有被内置消费的菜单事件，将触发onMenuAction事件

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

自定义 菜单图标

方式一： URL图标映射表 iconUrlMap

let iconUrlMap = {
  copy: "icon-copy@64.png",
  cut: "icon-cut@64.png",
  paste: "icon-paste@64.png",
  pasteText: "icon-paste-text@64.png",
};

方式二：Symbol图标映射表 iconMap

let iconMap = {
  copy: "icon-copy",
  cut: "icon-cut",
  paste: "icon-paste",
  pasteText: "icon-paste-text",
};

使用示例

//加载右键菜单
this.LoadContextMenu(thinkEditor);

应用自行封装示例

function LoadContextMenu(thinkEditor) {
  let ctxMenu = new ThinkEditorContextMenu({
    thinkEditor: thinkEditor,
    menuIconMap: { userDefine1: "icon-relieve-merge@64.png", userDefine2: "aaaa" },
  });

  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}右键菜单被按下`);
  };
}