React wangEditor 自定义菜单

wangEditor 初始化

在使用wangeditor的过程中，我们可以根据自己的需求自定义菜单

首先我们看wangEditor的引入过程：

导入：

import E from 'wangeditor';

创建区域：

  <div id="div1" ></div>

初始化：

	componentDidMount() {
	   
		const defaultMenu=[ 'head','bold', 'fontSize','fontName','italic','underline','foreColor','undo','redo','justify',]
		const editor = new E('#div1')
			editor.config.onchange=html=>{
				   this.setState({
					    editorContent:html
				    })
			}
			editor.config.menus=defaultMenu
			editor.zIndex.baseZIndex = 100
			editor.config.withCredentials = true
			editor.create();

	}

实现效果：

自定义菜单

开始自定义菜单，还是上面的类中操作：

引入菜单：

const {$, BtnMenu }=E;

创建菜单类：

class Image2 extends BtnMenu {
	constructor(editor){
		const $elem = $(
			`<div class="w-e-menu" data-title="图片">
				<i class="w-e-icon-image">
				</i>
			</div>`
		)
		super($elem, editor)
	}
	// 菜单点击事件
	clickHandler(){
		console.log(1);
	}
	tryChangeActive(){
		    const editor = this.editor
		    if (editor.cmd.queryCommandState('image2')) {
		        this.active()
		    } else {
		        this.unActive()
		    }
	}
}

完善：

	componentDidMount() {
	    const menuKeyVideo = "image2"
		const defaultMenu=[ 'head','bold', 'fontSize','fontName','italic','underline','foreColor','undo','redo','justify',]
		E.registerMenu(menuKeyVideo,Image2)
		const editor = new E('#div1')
	    editor.config.onchange=html=>{
				   this.setState({
					    editorContent:html
				    })
		 }
		editor.config.menus=defaultMenu
		editor.zIndex.baseZIndex = 100
		editor.config.withCredentials = true
		editor.create();
	}

查看效果：

 点击图片查看效果：

 希望对你有所帮助