wangeditor富文本编辑器拓展菜单——橡皮擦

 参考快速扩展一个菜单 · wangEditor 用户文档

继承 按钮 菜单样式自定义拓展 橡皮擦菜单按钮

const _this = this
const { $, BtnMenu } = E
 
// 自定义 清除格式 菜单继F承 BtnMenu class
class Wipe extends BtnMenu {
  constructor(editor) {
    // data-title属性表示当鼠标悬停在该按钮上时提示该按钮的功能简述
    const $elem = E.$(
      `<div class="w-e-menu" data-title="去除所有格式">
        <i class="el-icon-document-remove"></i>
      </div>`
    )
    super($elem, editor)
  }
  // 菜单点击事件
  clickHandler() {
    //获取className为w-e-text的富文本框dom
    function getP(dom) {
      if (!dom) return
      if (dom.className !== 'w-e-text') {
        return getP(dom.parentNode)
      } else {
        return dom
      }
    }
    //清除当前选中元素所有子元素样式
    function cleanAllStyle(dom) {
      if (!dom) return
      const tagNameList = dom.getElementsByTagName('p')
      Array.from(tagNameList).map((node) => {
        node.innerHTML = node.innerText
        node.style = null
      })
    }
    //获取鼠标位置的节点
    let containerEle = getP(
      this.editor.selection.getSelectionContainerElem().elems[0]
    )
    if (containerEle.className === 'w-e-text') {
      cleanAllStyle(containerEle)
    }
  }
  // 菜单是否被激活（如果不需要，这个函数可以空着）
  tryChangeActive() {}
}
 
// 注册菜单
E.registerMenu('Wipe', Wipe)