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

import { DomEditor } from '@wangeditor/editor';
let targetDom = null;
let editors = null;
export default class MyMenu {
  constructor() {
    // super(editor);
    this.title = '格式刷';
    this.iconSvg = '<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 384 512"><path d="M352 0H32C14.33 0 0 14.33 0 32v224h384V32c0-17.67-14.33-32-32-32zM0 320c0 35.35 28.66 64 64 64h64v64c0 35.35 28.66 64 64 64s64-28.65 64-64v-64h64c35.34 0 64-28.65 64-64v-32H0v32zm192 104c13.25 0 24 10.74 24 24c0 13.25-10.75 24-24 24s-24-10.75-24-24c0-13.26 10.75-24 24-24z" fill="currentColor"></path></svg>';
    this.tag = 'button';
    this._active = false;
    const dom = document.getElementById('editor-container');
    const _this = this;
    dom.onclick = function () {
      if (!_this._active) return;
      // 深拷贝所有的json
      let html = JSON.stringify(editors.children);
      html = JSON.parse(html);
      console.log(html);
      // 当前获取的的值
      const doms = DomEditor.getSelectedElems(editors);
      if (doms[0]?.type == 'image' || doms[1]?.type == 'image') return false;
      if (!targetDom) {
        _this._active = false;
        return;
      }
      // 循环赋值
      for (let l = 0; l < html.length; l++) {
        for (let i = 0; i < html[l].children.length; i++) {
          let children = doms[0].children[0].text.replace(/\s+/g, '');
          if (children == '') children = doms[0].children[1];
          if (html[l].children[i].text == children.text) {
            for (const key in targetDom) {
              html[l].children[i][key] = targetDom[key];
            }
          }
        }
      }
      const paste = pasteDom(html);
      console.log(paste, 'paste');
      console.log(editors.getHtml());
      editors.setHtml(paste);
    };
  }

  tryChangeActive() {}

  getValue(editor) {
    return editor;
  }

  isActive(editor) {
    return false;
  }

  isDisabled(editor) {
    return false; // or true
  }

  exec(editor, value) {
    editors = editor;
    this._active = !this._active;
    if (!this._active) {
      editor.copyStyleList = null;
    } else {
      // 获取格式刷样式
      const node = DomEditor.getSelectedElems(editor);
      // if (!node) return;
      const containerEle = node[0];
      const copyStyleList = parseDom(containerEle);
      // // 保存格式刷样式
      editor.copyStyleList = copyStyleList;
    }
  }
}

// 复制选中dom的样式
function parseDom(dom) {
  if (dom.children[0]?.type == 'image' || dom.children[1]?.type == 'image') return false;
  getTargetDom(dom);
  function getTargetDom(dom) {
    let children = dom.children[0];
    const item = children.text.replace(/\s+/g, '');
    if (item == '') children = dom.children[1];
    const childrens = { ...children };
    delete childrens.text;
    targetDom = childrens;
  }
}

// 循环制造标签
function pasteDom(dom) {
  let list = '';
  for (let l = 0; l < dom.length; l++) {
    for (let i = 0; i < dom[l].children.length; i++) {
      let style = '';
      let text = '';
      if (dom[l].children[i].type == 'image') {
        for (const keyl in dom[l].children[i].style) {
          style += `${keyl}：${dom[l].children[i].style[keyl]};`;
        }
      } else {
        text = dom[l].children[i].text;
        delete dom[l].children[i].text;
        for (const key in dom[l].children[i]) {
          let keys = key;
          if (keys == 'fontSize') keys = 'font-size';
          style += `${keys}：${dom[l].children[i][key]};`;
        }
      }
      const labels = dom[l].children[i].type !== 'image' ? `<p><span style="${style}">${text}</span></p>` : `<p><img style="${style}" src="${dom[l].children[i]?.src}"></img></p>`;
      list += labels;
    }
  }
  return list;
}