skl-admin/admin-frame/lib/editorButtom.js

import E from 'wangeditor';
const { BtnMenu } = E;
// 菜单 class ，Button 菜单继承 BtnMenu class
export default class MyMenu extends BtnMenu {
  constructor(editor) {
    const $elem = E.$(
      '<div class="w-e-menu" data-title="格式刷"> <i class="iconfont icon-geshishua"></i></div>'
    );
    super($elem, editor);
    const me = this;
    me.editor = editor;
    // 监听编辑器鼠标释放事件
    editor.$textElem.on('mouseup', () => {
      // 如果格式刷功能出于激活状态
      if (me._active) {
        // 延迟执行,避免获取不到正确的元素
        setTimeout(() => {
          // 复制格式刷样式
          pasteStyle(editor);
          // 取消格式刷激活样式
          // me.unActive();
        }, 10);
      }
    });
    editor.$textElem.on('click', () => {
      // 如果格式刷功能出于激活状态
      if (me._active) {
        // 延迟执行,避免获取不到正确的元素
        setTimeout(() => {
          // 复制格式刷样式
          pasteStyle(editor);
          // 取消格式刷激活样式
          // me.unActive();
        }, 10);
      }
    });
  }

  // 菜单点击事件
  clickHandler(e) {
    const editor = this.editor;
    if (this._active) {
      this.unActive();
      editor.copyStyleList = null;
    } else {
      // 激活按钮
      this.active();
      // 获取格式刷样式
      const containerEle = editor.selection.getSelectionContainerElem()?.elems[0];
      if (containerEle == null) return;
      const copyStyleList = parseDom(containerEle);
      // 保存格式刷样式
      editor.copyStyleList = copyStyleList;
    }
  }

  tryChangeActive() {}
}

// 复制选中dom的样式
function parseDom(dom) {
  let targetDom = null;
  const nodeArray = [];
  getTargetDom(dom);

  getAllStyle(targetDom);

  function getTargetDom(dom) {
    const nbsp = dom.innerText.replace(/\s/g, '');
    let children = dom.children[0];
    if (nbsp == '') {
      children = dom.children[1];
    }
    for (const i of dom.childNodes) {
      if (i.nodeType === 3 && i.nodeValue && i.nodeValue.trim() !== '') {
        targetDom = dom;
        return;
      }
    }
    getTargetDom(children);
  }

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

function addStyle(text, nodeArray) {
  let currentNode = null;
  nodeArray.forEach((ele, index) => {
    // 创建dom节点
    const 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;
}

// 粘贴
function pasteStyle(editor) {
  const isEmptySelection = editor.selection.isSelectionEmpty();
  const $selectionElem = editor.selection.getSelectionContainerElem()?.elems[0];
  const isFont = $selectionElem?.nodeName.toLowerCase() !== 'p';
  const isSameValue = $selectionElem?.getAttribute('face') === editor;

  if (isEmptySelection) {
    if (isFont && !isSameValue) {
      const $elems = editor.selection.getSelectionRangeTopNodes();
      editor.selection.createRangeByElem($elems[0]);
      editor.selection.moveCursor($elems[0].elems[0]);
    }
    editor.selection.setRangeToElem($selectionElem);
    // 插入空白选区
    editor.selection.createEmptyRange();
  }

  // 获取格式刷保存的样式
  const copyStyleList = editor.copyStyleList;
  // 有样式说明格式刷被激活
  if (copyStyleList) {
    // 获取当前选中内容
    // 如果没选中也会执行，再次使用需要重新激活格式刷功能
    const text = editor.selection.getSelectionText();
    const targetDom = addStyle(text, copyStyleList);
    editor.cmd.do('insertHTML', targetDom.outerHTML);
  }
}