wangeditor自定义菜单, vue

1、新建editorMenu. js

创建菜单

import E form 'wangeditor'
const {$,BtnMenu} = E
import {state} from './observer'

export class Video1 extends BtnMenu {
	constructor(editor){
		const $elem = $(
			`<div class"w-e-menu" data-title="视频">
				<i class="w-e-icon-play"></i>
			</div>`
		)
		super($elem, editor)
	}
	// 菜单点击事件
	clickHandler(){
		// 弹框自定义视频列表
		state.selVideoDialog = true
	}
	// 尝试修改菜单 active状态,不改就不写，比如加粗要标亮的时候使用
	tryChangeActive(){}
}

export class Voice1 extends BtnMenu {
	constructor(editor){
		const $elem = $(
			`<div class"w-e-menu" data-title="音频">
				<i class="w-e-icon-microphone"></i>
			</div>`
		)
		super($elem, editor)
	}
	// 菜单点击事件
	clickHandler(){
		// 弹框自定义音频列表
		state.selVoiceDialog = true
	}
	// 尝试修改菜单 active状态
	tryChangeActive(){}
}

2、使用编 辑器的vue文件中引入

import E form " wangeditor"
import {Video1,Voice1} form "./ editorMenu.js"

<div height="100%" id=" editorBox"></div>

mounted(){
      const menuKeyVideo = "video"
      const menuKeyVoice = "voice"
      this.editor = new E("# editorBox")
		// 全局注册自定义菜单video, voice
     E.registerMenu(menuKeyVideo,Video1)
     E.registerMenu(menuKeyVoice,Voice1)
      
	//创建编辑器
	this.editor.create()

}

3、js和vue直接传值，用于弹框显示，observable

中间件文件 observer.js

import Vue from "vue"

export const state = Vue. observable({
       selVideoDialog: false,
       selVoiceDialog: false
})

js中获取改值

import {state} form "./observe"
// 改值
state.selVideoDialog = true

// vue文件中使用
import {state} form "./observe"
 //使用  state.selVideoDialog=改值，显示用selVideoDialog

computed:{
     selVideoDialog(){
           return state.selVideoDialog
     }
}