基于wangeditor的格式刷

工作中需要使用富文本，出于简洁的考虑，我选择了wangeditor，可是PM突然说要加一个格式刷功能，所以去找插件，然后我就看到了下面这张图。

image

同时也在其他地方看到了类似的文章，不过他使用的editor版本貌似和我的不一致，所以决定自己写一个。

首先要判断格式刷的边界问题，range获取到的节点是当前选中区域所在节点的父节点，而不是你选择的文字部分。所以，实际上需要复制的样式是获取到的节点一层一层往里找，直到找到文本节点为止，如果该节点没有，就找它的第一个子节点。

 function getTargetDom(dom) {
    for (let i of dom.childNodes) {
      if (i.nodeType === 3 && i.nodeValue && i.nodeValue.trim() !== '') {
        targetDom = dom;
        return;
      }
    }
    getTargetDom(dom.children[0]);
  }

然后我们要从这个目标节点开始一层一层往上找，直到找到p标签为止，因为p标签在富文本里面代表一行，同时，因为模板没有严格按照编辑器里面来，我们需要把p标签里面的样式也做一个处理，这里我换成了span标签。

 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) => {
    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;
}

接下来是和编辑器相关的操作就不在赘述了，结合编辑器以及MDN的文档，可以实现大部分功能。
值得一提的是，我这里判断文字选择用的是mouseup的事件，因为暂时也没想到其他的办法，如果有更好的办法，希望不吝赐教。
预览地址：https://snjiang1992.github.io/format-painter/
源码地址：https://github.com/SNJiang1992/format-painter