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();
  }

查看效果：

 点击图片查看效果：

 希望对你有所帮助