【wangeditor富文本编辑器v4版自定义功能】格式刷

 注：本人只处理了选择单行的情况。

使用方法：1.先选择想要的样式所在的文字。2.点击启动格式刷。3.选中想要复制给的文字

前端菜鸡，烂代码勿喷QAQ

---

完整代码：

      const { BtnMenu } = wangEditor;
      //配置格式刷
      class format extends BtnMenu {
        constructor(editors) {
          const $elem = wangEditor.$(
            `
                <div class="w-e-menu format-menu" data-title="格式刷">
                 
                </div>
            `
          );
          super($elem, editors);
        }
        for_style(domE) {
          let arr = {};
          for (let i = 0; i < domE.length; i++) {
            arr[domE[i]] = domE[domE[i]];
          }
          //console.log("循环获取样式", arr);
          return arr;
        }
        font_style(domE) {
          let arr = [];
          let color = domE.getAttribute("color");
          let size = domE.getAttribute("size");
          let face = domE.getAttribute("face");
          if (color != null) {
            arr.push(`color='${color}'`);
          }
          if (size != null) {
            arr.push(`size='${size}'`);
          }
          if (face != null) {
            arr.push(`face='${face}'`);
          }
          return arr;
        }
        string_style(val) {
          let arr = "";
          for (const key in val) {
            if (val.hasOwnProperty(key)) {
              const element = val[key];
              arr += `${key}:${element};`;
            }
          }
          return arr;
        }
        clickHandler(e, type) {
          //console.log(this.$elem);
          //console.log("格式刷被点击");
          //获取editor全局编辑对象
          const editor = this.editor;
          // 判断当前格式刷是否已经被激活
          // 如果是激活状态：关闭格式刷
          if (this.formatShow) {
            this.formatShow = false;
            editor._brush = false;
            // editor._dblBrush = false;
            this.$elem.removeClass("format-active");
            editor.$textContainerElem.removeClass("brush");
            //console.log("关闭格式刷");
            return;
          }
          // 如果当前状态是未激活
          // 将格式刷改成激活状态
          this.formatShow = true;
          editor._brush = true;
          // this.$elem.addClass('w-e-active')
          // 如果是双击格式刷触发连续使用格式刷
          // 记录双击格式刷状态
          // editor._dblBrush = type === "dblclick" ? true : false;
          this.$elem.addClass("format-active");
          editor.$textContainerElem.addClass("brush");
          //获取选中对象
          let containerEle = editor.selection.getSelectionContainerElem();
          editor._html = [];
          if (containerEle.elems[0].tagName.toLowerCase() == "font") {
            //console.log("有font");
            editor._html.push({
              html: containerEle.elems[0].tagName.toLowerCase(),
              style: this.font_style(containerEle.elems[0]),
            });
          } else {
            editor._html.push({
              html: containerEle.elems[0].tagName.toLowerCase(),
              style: this.string_style(
                this.for_style(containerEle.elems[0].style)
              ),
            });
          }
          //向上整合style
          //如果是顶级p标签name将style放在wrap里面，否则直接整合进style
          while (!containerEle.equal(editor.$textElem)) {
            containerEle = containerEle.parent();
            //console.log("循环中", containerEle);
            if (
              containerEle.parent().equal(editor.$textElem) &&
              !containerEle.equal(editor.$textElem)
            ) {
              editor._html.push({
                html: containerEle.elems[0].tagName.toLowerCase(),
                style: this.string_style(
                  this.for_style(containerEle.elems[0].style)
                ),
              });
            }
            if (
              !containerEle.parent().equal(editor.$textElem) &&
              !containerEle.equal(editor.$textElem)
            ) {
              //console.log("非顶点");
              if (containerEle.elems[0].tagName.toLowerCase() == "font") {
                //console.log("有font");
                editor._html.push({
                  html: containerEle.elems[0].tagName.toLowerCase(),
                  style: this.font_style(containerEle.elems[0]),
                });
              } else {
                editor._html.push({
                  html: containerEle.elems[0].tagName.toLowerCase(),
                  style: this.string_style(
                    this.for_style(containerEle.elems[0].style)
                  ),
                });
              }
            }
          }
          // editor._html = [];
          // editor._html.push(containerEle.elems[0].tagName.toLowerCase());
          //console.log(editor);
          editor.$textElem.on("mouseup", (e) => {
            //  //console.log("监听可编辑区域", e);
            //  //console.log("当前选区", editor.saveSelection());
            editor.$textElem.off("mouseleave", editor.selection.saveRange());
            if (editor._brush) {
              let text;
              let style = "";
              let wrapStyle = "";
              //console.log("选区是否为空", editor.selection.isSelectionEmpty());

              if (editor.selection.isSelectionEmpty()) {
                // 如果没有选中任何内容
                // 折叠选区
                editor.selection.collapseRange();
              } else {
                let range = editor.selection.getRange();
                let containerElem =
                  editor.selection.getSelectionContainerElem();
                   // 如果只刷了一行
                if (!containerElem.equal(editor.$textElem)) {
                  text = editor.selection.getSelectionText();
                  //设置模板
                  let _html = "";
                  for (let i = 0; i < editor._html.length; i++) {
                    if (i == 0) {
                      if (editor._html[0].html == "font") {
                        let arr = ``;
                        for (
                          let index = 0;
                          index < editor._html[0].style.length;
                          index++
                        ) {
                          arr += ` ${editor._html[0].style[index]}`;
                        }
                        console.log(
                          (_html = `<${editor._html[0].html} ${arr}>${text}</${editor._html[0].html}>`)
                        );
                        _html = `<${editor._html[0].html} ${arr}>${text}</${editor._html[0].html}>`;
                      } else {
                        _html = `<${editor._html[0].html} style="${editor._html[0].style}">${text}</${editor._html[0].html}>`;
                      }
                    } else {
                      if (editor._html[i].html == "font") {
                        let arr = ``;
                        for (
                          let index = 0;
                          index < editor._html[i].style.length;
                          index++
                        ) {
                          arr += ` ${editor._html[i].style[index]}`;
                        }
                        _html = `<${editor._html[i].html}  ${arr}>${_html}</${editor._html[i].html}>`;
                      } else {
                        _html = `<${editor._html[i].html} style="${editor._html[i].style}">${_html}</${editor._html[i].html}>`;
                      }
                    }
                  }
                  //渲染模板
                  editor.cmd.do("insertHTML", _html);
                }
              }
            }
          });
        }
        // 菜单激活状态
        tryChangeActive() { }
      }
      editor.menus.extend("format", format);