wangEditor+vue富文本编译器自定义扩展新菜单（插入域）

 可在config.js编写新菜单功能

 // class MySelectMenu implements ISelectMenu {   // TS 语法
  class MySelectMenu {                       // JS 语法
    constructor() {
      this.title = '插入域',
        this.tag = 'select'
      this.selectPanelWidth = 200
    }
    // 下拉框的选项
    // getOptions(editor: IDomEditor) {   // TS 语法
    getOptions(editor) {            // JS 语法
      const options = [
        {
          value: '插入域', text: '插入域',
          selected: true
        },
      ]
      const { insertField = [] } = editor.getMenuConfig('insertField')
      console.log('insertField', insertField)
      insertField.forEach((item) => {
        const { text, value } = item
        options.push({
          text,
          value
        })
      })
      return options
    }
    // 菜单是否需要激活（如选中加粗文本，“加粗”菜单会激活），用不到则返回 false
    // isActive(editor: IDomEditor): boolean {    // TS 语法
    isActive(editor) {                      // JS 语法
      return false
    }
    // 获取菜单执行时的 value ，用不到则返回空 字符串或 false
    // getValue(editor: IDomEditor): string | boolean {    // TS 语法
    getValue(editor) { 
      return '插入域'
    }
    // 菜单是否需要禁用（如选中 H1 ，“引用”菜单被禁用），用不到则返回 false
    // isDisabled(editor: IDomEditor): boolean {   // TS 语法
    isDisabled(editor) { // JS 语法
      // console.log('this.getOptions.length==1',this.getOptions(editor).length==1);
      // console.log('this.getOptions.length',this.getOptions(editor));
      if(this.getOptions(editor).length==1)return true       //插入域无其他设置内容则禁用               
      return false
    }
    // 点击菜单时触发的函数
    // exec(editor: IDomEditor, value: string | boolean) {   // TS 语法
    exec(editor, value) {                              // JS 语法
      // Select menu ，这个函数不用写，空着即可
      if(value!='插入域'){
        const innerHTML = `<span style="color: rgb(54, 88, 226);"><strong>#${value}#</strong></span>`
        editor.dangerouslyInsertHtml(innerHTML)
      }
    }
  }



   
  function getinsertField () {
    const insertField = []
    return insertField
  }



   
  const insertField1Conf = {
    key: 'insertField', // 定义 menu key ：要保证唯一、不重复（重要）
    factory () {
      return new MySelectMenu() // 把 `YourMenuClass` 替换为你菜单的 class
    },
    // 默认的菜单菜单配置，将存储在 editorConfig.MENU_CONF[key] 中
    // 创建编辑器时，可通过 editorConfig.MENU_CONF[key] = {...} 来修改
    config: {  
      insertField: getinsertField()
    }
  }
   
  export default insertField1Conf

在wangeditor.vue文件中将编写的新菜单注册到wangeditor 

<template>
  <div style="border: 1px solid #ccc">
    <Toolbar
      style="border-bottom: 1px solid #ccc"
      :editor="editor"
      :defaultConfig="toolbarConfig"
      :mode="mode"
      />
    <Editor
      style="height: 500px; overflow-y: hidden"
      v-model="html"
      :defaultConfig="editorConfig"
      :mode="mode"
      @onCreated="onCreated"
      />
  </div>
</template>

<script>
  import { Editor, Toolbar } from "@wangeditor/editor-for-vue";
  import insertField1Conf from "./config";
  import { Boot } from "@wangeditor/editor";
  Boot.registerMenu(insertField1Conf);//注册插入域菜单
  export default {
    components: { Editor, Toolbar },
    props: {
      insertField: {
        type: Array,
        default:[]
      },
    },
    data() {
      return {
        editor: null,
        html: "",
        toolbarConfig: {
          insertKeys: {
            index: 0, // 插入的位置，基于当前的 toolbarKeys
            keys: ["|", "insertField", "|"],
          },
        },
        editorConfig: {
          placeholder: '"请输入内容..."',
          MENU_CONF: {
            insertField: {
              insertField:[...this.insertField] //设置插入域内容
            },
          },
        },
        mode: "default", // or 'simple'
      };
    },
    watch: {
      insertField: {
        deep: true,
      },
    },
    methods: {
      onCreated(editor) {
        this.editor = Object.seal(editor); // 一定要用 Object.seal() ，否则会报错
      },
    },
    mounted() {},
    beforeDestroy() {
      const editor = this.editor;
      if (editor == null) return;
      editor.destroy(); // 组件销毁时，及时销毁编辑器
    },
  };
</script>

<style src="@wangeditor/editor/dist/css/style.css"></style>

 导入到运用的vue文件里

import wangEditor from "./components/wangEditor.vue";

  <wangEditor :insertField="insertField"></wangEditor>

  insertField: [
    {value: "深圳1",text: "深圳1",},
    {value: "深圳2",text: "深圳2",},
    {value: "深圳3",text: "深圳3",},
  ],