wangEditor自定义菜单遇到 Uncaught (in promise) Error: Duplicated key ‘clearAll‘ in menu items

首先要知道，出现这个报错是因为你在使用wangEditor富文本插件的时候来回切换导致的，报错的意思是你的富文本编辑器内部已经注册过clearAll这个菜单了，不允许在重复注册。

解决方案：在Editor的onCreated钩子内部获取到所有菜单项，并判断是否包含你注册的菜单

const handleCreated = (editor) => {
  editorRef.value = editor;
  if (!editor.getAllMenuKeys()?.includes("clearAll")) {
    //判断如果已经插入进去，不在二次插入
    Boot.registerMenu(menu1Conf);
  }
};

完整代码如下：

wangEditor完整代码可参考：v3中wangEditor5使用方法 + 上传图片/视频/附件功能_wangeditor上传附件_SunFlower914的博客-CSDN博客

    
    

import { Boot } from "@wangeditor/editor";

const toolbarConfig = {
  insertKeys: {
    index: 30, // 自定义插入的位置
    keys: ["clearAll"], // “上传附件”菜单
  },
  excludeKeys: ["uploadVideo", "fullScreen"],
};

class MyButtonMenu {
  constructor() {
    this.title = "清空内容"; // 自定义菜单标题
    this.iconSvg =
      '';
    this.tag = "button";
  }

  // 获取菜单执行时的 value ，用不到则返回空 字符串或 false
  getValue(editor) {
    // JS 语法
  }

  // 菜单是否需要激活（如选中加粗文本，“加粗”菜单会激活），用不到则返回 false
  isActive(editor) {
    // JS 语法
    return false;
  }

  // 菜单是否需要禁用（如选中 H1 ，“引用”菜单被禁用），用不到则返回 false
  isDisabled(editor) {
    // JS 语法
    return false;
  }

  // 点击菜单时触发的函数
  exec(editor, value) {
    // JS 语法
    editor.clear();
  }
}

const menu1Conf = {
  key: "clearAll", // 定义 menu key ：要保证唯一、不重复（重要）
  factory() {
    return new MyButtonMenu();
  },
};

const handleCreated = (editor) => {
  editorRef.value = editor; // 记录 editor 实例，重要！
  if (!editor.getAllMenuKeys()?.includes("clearAll")) {
    //判断如果已经插入进去，不在二次插入
    Boot.registerMenu(menu1Conf);
  }
};