wangEditV3版本 插入自定义菜单

一、新建js文件

该js文件表示新增的菜单内容，例newMenu.js

class NewMenu {
  constructor() {
    this.title = "插入新菜单"; // tooltip显示内容
    this.iconSvg = '<svg><path d="..."></path></svg>'; // 图标
    this.tag = "button";  // 'button'表示按钮或下拉面板或弹框，'select'表示下拉框
    // this.width = 60 // 下拉框时显示
    // this.showDropPanel = true // 下拉面板时显示
    // this.showModal = true // 弹框时显示
    // this.modalWidth = 300 // 弹框时显示
  }
 
  // 菜单是否需要激活（如选中加粗文本，“加粗”菜单会激活），用不到则返回 false
  isActive(editor) {
    return false;
  }
 
  // 获取菜单执行时的 value ，用不到则返回空字符串或 false
  getValue(editor) {
    return "11111";
  }
 
  // 菜单是否需要禁用（如选中 H1 ，“引用”菜单被禁用），用不到则返回 false
  isDisabled(editor) {
    return false;
  }
  // 点击菜单时触发的函数
  exec(editor, value) {
    // ModalMenu时这个函数不用写，空着即可
    if (this.isDisabled(editor)) return;
    editor.insertText(value) //value即this.getValue(editor)的返回值，将value插入到editor里
  }
}
const menuConfig = {
  key: "insertNewMenu", // menukey 唯一。注册之后，需通过toolbarKeys配置到工具栏
  factory() {
    return new NewMenu();
  },
};
 
export default menuConfig;

二、wangEditor富文本vue文件引用该js文件

将该新菜单注册到wangEditor里并加入到toolbar里，例RichTextEdit.vue

<template>
  <div ref="editor">
    <Toolbar
      class="toolbar-container"
      :editor="editor"
      :defaultConfig="toolbarConfig"
      :mode="mode"
    />
    <Editor
      :style="{ height: height }"
      class="editor-container"
      v-model="html"
      :defaultConfig="editorConfig"
      :mode="mode"
      @onCreated="onCreated"
      @onChange="onChange"
      @onDestroyed="onDestroyed"
    />
  </div>
</template>
<script>
import { EventBus } from '@/assets/utils/eventBus';
import { Editor, Toolbar } from "@wangeditor/editor-for-vue";
import { Boot, DomEditor } from "@wangeditor/editor";
import newMenu from "@/components/RichTextEdit/newMenu";
Boot.registerMenu(newMenu); // 注册新菜单

export default {
  name: "EditorComponent",
  props: {
    // 初始值
    initHtml: {
      type: String,
      default: "",
    },
    placeholder: {
      type: String,
      default: "请输入内容",
    },
    // 小于110px无效
    editorHeight: {
      type: String,
      default: "110px",
    },
    // 编辑器风格 'default' or 'simple'
    mode: {
      type: String,
      default: "simple",
    },
  },
  components: { Editor, Toolbar },
  data() {
    return {
      editor: null,
      // 工具栏配置
      toolbarConfig: {},
      // 编辑框配置
      editorConfig: {
        autoFocus: false,
        placeholder: this.placeholder,
        readOnly: false,

        MENU_CONF: {
          uploadImage: {
            maxFileSize: 2 * 1024 * 1024, // 单个文件的最大体积限制
            maxNumberOfFiles: 4, // 最多可上传几个文件
            // 选择文件时的类型限制
            allowedFileTypes: [
              "image/jpeg",
              "image/jpg",
              "image/png",
              "image/svg",
              "image/gif",
              "image/webp",
            ],
            timeout: 6 * 1000,
            // 自定义上传图片的方法
            customUpload: (file, insertFn) => {
              this.uploadImage(file, insertFn);
            },
          },
          uploadVideo: {
            maxNumberOfFiles: 1,
            maxFileSize: 100 * 1024 * 1024,
            allowedFileTypes: ["video/mp4", "video/3gp", "video/m3u8"],
            timeout: 6 * 1000,
            customUpload: (file, insertFn) => {
              this.uploadVideo(file, insertFn);
            },
          },
        },
      },
      // 排除配置
      simpleExcludeConfig: [
        "blockquote",
        "header3",
        "underline",
        "italic",
        "through",
        "color",
        "bgColor",
        "clearStyle",
        "todo",
        "justifyLeft",
        "justifyRight",
        "justifyCenter",
        "insertLink",
        "group-image",
        "insertVideo",
        "codeBlock",
      ],
      // 默认风格插入配置
      simpleInsertConfig: {
        index: 20, // 自定义
        keys: [
          "newMenu", // 新菜单
        ],
      },
      html: "",
    };
  },
  created() {
    this.toolbarConfig.insertKeys = this.simpleInsertConfig;
    this.toolbarConfig.excludeKeys = this.simpleExcludeConfig;
    this.html = this.initHtml;
  },
  watch: {
    initHtml() {
      this.html = this.initHtml;
    },
  },
  computed: {
    // 限制editor高度
    height() {
      return parseInt(this.editorHeight) < 110 ? "110px" : this.editorHeight;
    },
  },
  mounted() {},
  methods: {
    onCreated(editor) {
      this.editor = Object.seal(editor);
    },
    onChange(editor) {},
    onDestroyed(editor) {
      console.log("onDestroyed", editor);
    },
    uploadImage(file, insertFn) {...},
    uploadVideo(file, insertFn) {...},
  },
  beforeDestroy() {
    const editor = this.editor;
    if (editor == null) return;
    editor.destroy(); // 组件销毁时，及时销毁编辑器
  },
};
</script>
<style scoped lang="scss">
@import "@wangeditor/editor/dist/css/style.css";
</style>

三、结果显示