tinymce-vue格式刷

配置参考 https://blog.csdn.net/qq_41490275/article/details/108094650

 <el-button
          v-bind:class="{ active: formatpainterFlag }"
          plain
          size="small"
          class="searchBtnClear formatpainterBtn"
          @click="formatpainterEditor"
        >
          格式刷
        </el-button>
<tinymce-editor
          v-model="editorMsg"
          @onClick="onEditorClick"
          ref="editorRef"
        ></tinymce-editor>

 onEditorClick(e, editor) {
      /*  console.log("Element clicked");
      console.log(e);
      console.log(editor); */
      console.log(
        tinyMCE.activeEditor.selection.getContent({ format: "html" })
      );
      console.log(tinyMCE.activeEditor.selection.getRng().startContainer);
      let currentContainer = tinyMCE.activeEditor.selection.getRng()
        .startContainer;
      let dom = tinyMCE.activeEditor.dom;
      while (true) {
        currentContainer = currentContainer.parentNode;
        if ("P" === currentContainer.nodeName) {
          this.currentBlockStyle = dom.getAttrib(currentContainer, "style");
          break;
        }
        if ("SPAN" === currentContainer.nodeName) {
          this.currentNodeStyle = dom.getAttrib(currentContainer, "style");
        }
        if ("EM" === currentContainer.nodeName) {
          this.currentEm = true;
        }
        if ("STRONG" === currentContainer.nodeName) {
          this.currentStrong = true;
        }
      }
      console.log(
        this.currentBlockStyle,
        this.currentNodeStyle,
        this.currentEm,
        this.currentStrong
      );
      if (this.formatpainterFlag) {
        var range = tinyMCE.activeEditor.selection.getRng();
        let that = this;
        var setStyle = function (text) {
          //粗体
          if (that.currentStrong) {
            text = "<strong>" + text + "</stong>";
          }
          //斜体
          if (that.currentEm) {
            text = "<em>" + text + "</em>";
          }
          if (that.currentNodeStyle) {
            text =
              "<span style='" + that.currentNodeStyle + "'>" + text + "</span>";
          }
          return text;
        };
        this.formatpainterFlag = false;
        //应用样式到选中的range中
        var blocks = tinyMCE.activeEditor.selection.getSelectedBlocks();
        for (var i = 0; i < blocks.length; i++) {
          //先应用段落的样式
          tinyMCE.activeEditor.dom.setAttrib(
            blocks[i],
            "style",
            this.currentBlockStyle
          );
          //如果是第一个
          if (0 === i) {
            //如果同一个container
            if (range.startContainer === range.endContainer) {
              var text = tinyMCE.activeEditor.selection.getContent({
                format: "text",
              });
              tinyMCE.activeEditor.selection.setContent(setStyle(text));
            } else {
              //否则构造一个select让其选中当前block的最后一个
              var currentRange = range.cloneRange();
              var lastNode = range.startContainer;
              while (true) {
                var nextNode = tinyMCE.activeEditor.dom.getNext(
                  lastNode,
                  function (node) {
                    return true;
                  }
                );
                console.log(nextNode);
                if (tinyMCE.activeEditor.dom.isChildOf(nextNode, blocks[i])) {
                  lastNode = nextNode;
                } else {
                  break;
                }
              }
              currentRange.setEnd(lastNode, lastNode.length);
              console.log(currentRange);
              tinyMCE.activeEditor.selection.setRng(currentRange);
              var text = tinyMCE.activeEditor.selection.getContent({
                format: "text",
              });
              tinyMCE.activeEditor.selection.setContent(setStyle(text));
              //把范围设置回去
              tinyMCE.activeEditor.selection.setRng(range);
            }
          } else if (blocks.length - 1 === i && blocks.length > 1) {
            //否则构造一个select让其选中当前block的最开始那个
            var currentRange = range.cloneRange();
            var startNode = range.endContainer;
            while (true) {
              var prevNode = tinyMCE.activeEditor.dom.getPrev(
                startNode,
                function (node) {
                  return true;
                }
              );
              if (tinyMCE.activeEditor.dom.isChildOf(prevNode, blocks[i])) {
                startNode = prevNode;
              } else {
                break;
              }
            }
            currentRange.setStart(startNode, 0);
            tinyMCE.activeEditor.selection.setRng(currentRange);
            var text = tinyMCE.activeEditor.selection.getContent({
              format: "text",
            });
            tinyMCE.activeEditor.selection.setContent(setStyle(text));
            //把范围设置回去
            tinyMCE.activeEditor.selection.setRng(range);
          } else {
            //如果是夹在中间的则所有文字应用样式
            var text = strip_tags(blocks[i].innerHTML);
            blocks[i].innerHTML = setStyle(text);
            //如果已经有span标签了
            //如果是最后一个,且不是只选中了一个
          }
        }
      }
      // e.currentTarget.innerHTML
    },
formatpainterEditor() {
      this.formatpainterFlag = true;
    },