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

檢視效果：