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博客

    <Toolbar
      style="border-bottom: 1px solid #dcdfe6"
      :editor="editorRef"
      :defaultConfig="toolbarConfig"
      :mode="mode"
    />
    <Editor
      :style="{ height: height + 'px', overflowY: 'hidden' }"
      class="EditorDom"
      v-model="editValue"
      :defaultConfig="editorConfig"
      :mode="mode"
      @onCreated="handleCreated"
      @onChange="handleChange"
    />

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

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

class MyButtonMenu {
  constructor() {
    this.title = "清空内容"; // 自定义菜单标题
    this.iconSvg =
      '<svg t="1696926237451" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2371" width="180" height="180"><path d="M512 838.858c10.89 0 19.732-9.158 19.732-20.43v-490.275c0-11.273-8.842-20.43-19.732-20.43s-19.755 9.157-19.755 20.43v490.275c0 11.272 8.842 20.43 19.755 20.43M629.877 838.813c10.935 0.428 20.138-8.37 20.475-19.688l28.665-489.69c0.427-11.272-8.077-20.745-18.99-21.195-10.935-0.405-20.137 8.415-20.475 19.688l-28.665 489.713c-0.405 11.317 8.1 20.767 18.99 21.172M848.038 185.142h-197.708v-81.653c0-22.545-17.685-40.882-39.51-40.882h-197.64c-21.87 0-39.532 18.338-39.532 40.882v81.653h-197.685c-10.913 0-19.755 9.158-19.755 20.475 0 11.272 8.843 20.407 19.755 20.407h39.577l39.488 653.67c6.367 44.73 35.415 81.72 79.065 81.72h355.793c43.65 0 71.573-37.44 79.088-81.72l39.488-653.67h39.578c10.867 0 19.755-9.135 19.755-20.408 0-11.317-8.888-20.475-19.755-20.475M413.157 103.49h197.64v81.653h-197.64v-81.653zM729.418 879.695c-2.655 21.555-17.73 40.86-39.533 40.86h-355.793c-21.87 0-36.54-19.057-39.532-40.86l-39.532-653.67h513.945l-39.555 653.67zM394.145 838.858c10.89-0.473 19.373-9.9 18.99-21.195l-29.070-489.712c-0.427-11.273-9.585-20.070-20.475-19.665-10.913 0.428-19.463 9.9-19.013 21.173l29.093 489.712c0.36 11.295 9.54 20.070 20.475 19.688z" p-id="2372"></path></svg>';
    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);
  }
};