wangeditor文本编辑器工具栏insertKeys插入自定义变量

 

import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
import { menu1Conf, menu2Conf } from './menu'
import { IToolbarConfig, ISelectMenu, IDomEditor, DomEditor, Boot, IModuleConf } from '@wangeditor/editor'
import E from 'wangeditor'
const module = {
  menus: [menu1Conf, menu2Conf],
}

export default {
  name: "edit",
  components: {
    Editor,
    Toolbar
  },
  data() {
    return {
      // 工具栏和编辑器start--------
      editor: null,
      toolbarConfig: {
        toolbarKeys: [
          "headerSelect",
          "bold",
          "underline",
          "italic",
          "color",
          "bgColor",
          "|",
          "fontSize",
          "fontFamily",
          "lineHeight",
          "bulletedList",
          "numberedList",
          "todo",
          "insertLink",
          "fullScreen",
        ],/* 显示哪些菜单，如何排序、分组 */
        // excludeKeys: [ /* 隐藏哪些菜单 */ ],
      },
      toolbar: {},
      editorConfig: {
        placeholder: "请输入内容...",
        // autoFocus: false,
        // 所有的菜单配置，都要在 MENU_CONF 属性下
        MENU_CONF: {},
      },
      // 工具栏和编辑器end--------
      toolVis: false,
      toolSelectData:[]
    }
  },


  created() {
    // 获取自定义变量的接口
    Promise.all([api.name({})]).then(res => {
      this.toolSelectData = [
        {"id":1,"name":"文本占位符_1","field":"extra_1","isUse":0},
        {"id":2,"name":"文本占位符_2","field":"extra_2","isUse":0},
        {"id":3,"name":"文本占位符_3","field":"extra_3","isUse":0},
       ]
      this.$nextTick(() => {
        this.toolVis = true // 为了先获取到变量后再在将文本编辑器初始化， 不然会报错
      })
    })
  },
  computed: {},

  mounted() {},
  methods: {
    // ----------------  工具栏和编辑器start------------
    onCreated(editor) {
      const textData = this.toolSelectData.map(item => {
        return {
          text: item.name,
          value: item.field,
          styleForRenderMenuList: { 'width': '120px', } //设置自定义变量select框的样式
        }
      })
      const conf1 = menu1Conf(textData)
      const module = {
        menus: [conf1],
      }
      this.editor = Object.seal(editor); // 【注意】一定要用 Object.seal() 否则会报错
      Boot.registerModule({
        menus: [],
      })
      this.$nextTick(() => {
        if (editor) {
          this.toolbar = DomEditor.getToolbar(editor);
          const toolsConfig = this.editor.getConfig()
          if (!toolsConfig.MENU_CONF.menu1) Boot.registerModule(module)
          this.toolbar.config.insertKeys = {
            index: 0, // 插入的位置，基于当前的 toolbarKeys
            keys: [conf1.key]
          }
        }
      })
    },
    // ----------------  工具栏和编辑器end------------
  },
  beforeDestroy() {
    if (this.editor == null) return;
    // console.log(this.editor, this.toolbar)
    this.toolbar.config.insertKeys = {}
    this.editor.destroy(); // 组件销毁时，及时销毁 editor ，重要！！！
  },
}

import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
import { IToolbarConfig, ISelectMenu, IDomEditor, DomEditor, Boot, IModuleConf } from '@wangeditor/editor'
import { Message } from 'element-ui';

// 插入变量
class MySelectMenu {
    constructor(data) {
        this.title = 'My Select Menu'
        this.tag = 'select'
        this.width = 140
        this.selectData = JSON.parse(JSON.stringify(data))
    }
    // 下拉框的选项
    getOptions(editor) {
        const options = this.selectData
        return options
    }
    isActive(editor) {
        return false
    }
    // 获取菜单执行时的 value ，用不到则返回空 字符串或 false
    getValue(editor) {
        return 'extra_1' // 匹配 options 其中一个 value
    }
    // 菜单是否需要禁用（如选中 H1 ，“引用”菜单被禁用），用不到则返回 false
    isDisabled(editor) {
        return false
    }
    // 点击菜单时触发的函数
    exec(editor, value) {
        let val = this.selectData.filter((item) => item.value == value)
        if (val && val.length > 0) {
            const getContent = editor.getHtml()
            if (getContent.includes(val[0].text)) {
                Message.warning('已有该变量')
            } else {
                editor.insertText(`{${val[0].text}}`)
            }
        }
    }
}

export const menu1Conf = (data) => {
    return {
        key: 'menu1', // 定义 menu key ：要保证唯一、不重复（重要）
        factory() {
            return new MySelectMenu(data) // 把 `YourMenuClass` 替换为你菜单的 class
        },
    }

}