?參考快速擴展一個菜單 · wangEditor 用戶文檔

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

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

// 自定義 格式刷 菜單繼F承 BtnMenu class
class FormatPainter extends BtnMenu {
  constructor(editor) {
    // data-title屬性表示當鼠標懸停在該按鈕上時提示該按鈕的功能簡述
    const $elem = E.$(
      `<div class="w-e-menu" data-title="格式刷">
        <i class="el-icon-s-open"></i>
      </div>`
    )
    super($elem, editor)
  }
  // 菜單點擊事件，獲取點擊格式刷后的下一次點擊文本
  clickHandler() {
    let nodeArray = []
    //獲取當前選中元素所有父樣式
    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
    }
    //獲取鼠標位置的節點
    let containerEle = this.editor.selection.getSelectionStartElem()
      .elems[0]
    let brushStyle = getAllStyle(containerEle)
    if (!!brushStyle) {
      //有復制到的格式就開啟格式刷
      _this.ifBrushed = true //格式刷開啟
      _this.brushStyle = brushStyle //格式刷樣式存儲
    }
  }
  // 菜單是否被激活（如果不需要，這個函數可以空著）
  tryChangeActive() {}
}

E.registerMenu('FormatPainter', FormatPainter)

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

/**
 * @description: 監聽文本點擊事件
 * @return void
 */
containerEleChange() {
  let containerEle = this.editor.selection.getSelectionContainerElem()
    .elems[0] //選區所在的 DOM 節點
  let containerEleStart = this.editor.selection.getSelectionStartElem()
    .elems[0] //選區開始的 DOM 節點
  let containerEleEnd = this.editor.selection.getSelectionEndElem().elems[0] //選區結束的 DOM 節點
  let ifEmpty = this.editor.selection.isSelectionEmpty() //判斷選區是否為“空”（即沒有選中任何文字）
  let containerText = this.editor.selection.getSelectionText() //選中的文字
  //復制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) {
    // 格式刷開啟則開始復制style
    let containerEleNew
    let containerEleText
    if (ifEmpty) {
      //判斷選區是否為“空”（即沒有選中任何文字）
      containerEleText = containerEle.innerText
      containerEleNew = addStyle(containerEle.innerText, this.brushStyle) //新的樣式
    } else {
      //選中一段文字
      containerEleText = containerText
      containerEleNew = addStyle(containerText, this.brushStyle) //新的樣式
    }
    if (containerEleStart === containerEleEnd) {
      //選區前后相等，選中的區域中間不夾雜其他標簽
      let innerText = containerEle.innerText
      if (ifEmpty) {
        // 沒有選中的文本直接全部替換掉
        containerEle.innerHTML = containerEleNew.innerHTML
      } else {
        //有選中的文本則替換選中的文本
        containerEle.innerHTML = innerText.replace(
          containerEleText,
          containerEleNew.innerHTML
        )
      }
    } else {
      //選區前后不相等，選中的區域中間夾雜其他標簽,操作和選區為“空”一樣
      containerEleNew = addStyle(containerEle.innerText, this.brushStyle) //新的樣式
      containerEle.innerHTML = containerEleNew.innerHTML
    }
  }
  this.ifBrushed = false
},

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