wangeditor5 在vue中自定义扩展按钮

官网传送门:

代码实现方式:

    <Toolbar
      style="border-bottom: 1px solid #ccc"
      :editor="editor"
      :defaultConfig="toolbarConfig"
      :mode="mode"
    />
    <Editor
      style="height: 300px"
      v-model="html"
      :defaultConfig="editorConfig"
      :mode="mode"
      @onCreated="onCreated"
      @onChange="onChange"
      @onDestroyed="onDestroyed"
      @onMaxLength="onMaxLength"
      @onFocus="onFocus"
      @onBlur="onBlur"
      @customAlert="customAlert"
      @customPaste="customPaste"
    />

js:
import { Editor, Toolbar  } from "@wangeditor/editor-for-vue";
import { Boot } from '@wangeditor/editor'

class MyButtonMenu { 
    constructor(vueInstance) {
        this.vueInstance = vueInstance;
        this.title = '编辑源代码' // 自定义菜单标题
        this.iconSvg = '<svg></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 语法
        if (this.isDisabled(editor)) return
        this.vueInstance.editHTML()
    }
}

因为我这里要用vue定义的method
所以我在created周期的时候注册按钮
data() {
	return {
		      toolbarConfig: {
		        insertKeys: {
		          idnex: 0,
		          keys: ['editCode']
        	    }
              }
	}
}
created() {
   	 let that = this
        const menu1Conf = {
	      key: 'editCode', // 定义 menu key ：要保证唯一、不重复（重要）
	      factory() {
	        return new MyButtonMenu(that)
	      },
	    }
   	 Boot.registerMenu(menu1Conf)
}

到这里配置好了按钮已经加上去了