?參考快速擴(kuò)展一個(gè)菜單 · wangEditor 用戶文檔

繼承 按鈕 菜單樣式自定義拓展 格式刷功能菜單按鈕

const _this = this
const { $, BtnMenu } = E

// 自定義 格式刷 菜單繼F承 BtnMenu class
class FormatPainter extends BtnMenu {
  constructor(editor) {
    // data-title屬性表示當(dāng)鼠標(biāo)懸停在該按鈕上時(shí)提示該按鈕的功能簡(jiǎn)述
    const $elem = E.$(
      `<div class="w-e-menu" data-title="格式刷">
        <i class="el-icon-s-open"></i>
      </div>`
    )
    super($elem, editor)
  }
  // 菜單點(diǎn)擊事件，獲取點(diǎn)擊格式刷后的下一次點(diǎn)擊文本
  clickHandler() {
    let nodeArray = []
    //獲取當(dāng)前選中元素所有父樣式
    function getAllStyle(dom) {
      if (!dom) return
      const tagName = dom.tagName.toLowerCase()
      if (tagName === 'p') {
        nodeArray.push({
          tagName: 'span',
          attributes: Array.from(dom.attributes).map((i) => {
            return {
              name: i.name,
              value: i.value,
            }
          }),
        })
        return
      } else {
        nodeArray.push({
          tagName: tagName,
          attributes: Array.from(dom.attributes).map((i) => {
            return {
              name: i.name,
              value: i.value,
            }
          }),
        })
        getAllStyle(dom.parentNode)
      }
      return nodeArray
    }
    //獲取鼠標(biāo)位置的節(jié)點(diǎn)
    let containerEle = this.editor.selection.getSelectionStartElem()
      .elems[0]
    let brushStyle = getAllStyle(containerEle)
    if (!!brushStyle) {
      //有復(fù)制到的格式就開啟格式刷
      _this.ifBrushed = true //格式刷開啟
      _this.brushStyle = brushStyle //格式刷樣式存儲(chǔ)
    }
  }
  // 菜單是否被激活（如果不需要，這個(gè)函數(shù)可以空著）
  tryChangeActive() {}
}

E.registerMenu('FormatPainter', FormatPainter)

//監(jiān)聽鼠標(biāo)抬起事件
this.$refs['editor'].addEventListener('mouseup', () => {
  //延時(shí)調(diào)用確保富文本編輯器中的選中文本已經(jīng)該改變
  setTimeout(() => {
    this.containerEleChange()
  })
})

/**
 * @description: 監(jiān)聽文本點(diǎn)擊事件
 * @return void
 */
containerEleChange() {
  let containerEle = this.editor.selection.getSelectionContainerElem()
    .elems[0] //選區(qū)所在的 DOM 節(jié)點(diǎn)
  let containerEleStart = this.editor.selection.getSelectionStartElem()
    .elems[0] //選區(qū)開始的 DOM 節(jié)點(diǎn)
  let containerEleEnd = this.editor.selection.getSelectionEndElem().elems[0] //選區(qū)結(jié)束的 DOM 節(jié)點(diǎn)
  let ifEmpty = this.editor.selection.isSelectionEmpty() //判斷選區(qū)是否為“空”（即沒有選中任何文字）
  let containerText = this.editor.selection.getSelectionText() //選中的文字
  //復(fù)制style到選中的文本
  function addStyle(text, nodeArray) {
    let currentNode = null
    nodeArray.forEach((ele, index) => {
      let node = document.createElement(ele.tagName)
      for (const attr of ele.attributes) {
        node.setAttribute(attr.name, attr.value)
      }
      if (index === 0) {
        node.innerText = text
        currentNode = node
      } else {
        node.appendChild(currentNode)
        currentNode = node
      }
    })
    return currentNode
  }

  if (this.ifBrushed) {
    // 格式刷開啟則開始復(fù)制style
    let containerEleNew
    let containerEleText
    if (ifEmpty) {
      //判斷選區(qū)是否為“空”（即沒有選中任何文字）
      containerEleText = containerEle.innerText
      containerEleNew = addStyle(containerEle.innerText, this.brushStyle) //新的樣式
    } else {
      //選中一段文字
      containerEleText = containerText
      containerEleNew = addStyle(containerText, this.brushStyle) //新的樣式
    }
    if (containerEleStart === containerEleEnd) {
      //選區(qū)前后相等，選中的區(qū)域中間不夾雜其他標(biāo)簽
      let innerText = containerEle.innerText
      if (ifEmpty) {
        // 沒有選中的文本直接全部替換掉
        containerEle.innerHTML = containerEleNew.innerHTML
      } else {
        //有選中的文本則替換選中的文本
        containerEle.innerHTML = innerText.replace(
          containerEleText,
          containerEleNew.innerHTML
        )
      }
    } else {
      //選區(qū)前后不相等，選中的區(qū)域中間夾雜其他標(biāo)簽,操作和選區(qū)為“空”一樣
      containerEleNew = addStyle(containerEle.innerText, this.brushStyle) //新的樣式
      containerEle.innerHTML = containerEleNew.innerHTML
    }
  }
  this.ifBrushed = false
},

//清除監(jiān)聽
beforeDestroy() {
  this.$refs['editor'].removeEventListener('click', this.containerEleChange)
},