个人小项目 Vue+node 纯原生富文本编辑器光标聚焦及插入dom

这里是引用了两个富文本输入框，标题一个，还有正文一个，但我们光标点击文本框外时，文本框就会失焦，比如你选择了一小块文字，要点击加粗，诶，失焦了，加粗不了了。

所以，光标到某些区域操作时，一定不能失焦！

怎么做？

// 防止输入框失焦的回调
    blurTitle() {
      // 防止聚焦丢失 排除部分需要失焦元素，不是去这些元素的话，就还是在标题输入框
      if (
        !this.onmousedownDom.path.includes(this.$refs.textDom) &&
        !this.onmousedownDom.path.includes(
          document.getElementsByClassName("nav-bar")[0]
        ) &&
        !this.onmousedownDom.path.includes(
          document.getElementsByClassName("add-link-pop")[0]
        )
      ) {
        this.$refs.titleDom.focus();
      }
    },
    blurTextarea() {
      // 防止聚焦丢失 排除部分需要失焦元素，不是去这些元素的话，就还是在正文输入框
      if (
        !this.onmousedownDom.path.includes(this.$refs.titleDom) &&
        !this.onmousedownDom.path.includes(
          document.getElementsByClassName("nav-bar")[0]
        ) &&
        !this.onmousedownDom.path.includes(
          document.getElementsByClassName("add-link-pop")[0]
        )
      ) {
        this.$refs.textDom.focus();
      } else {
        // 如果离开，记录光标位置
        lastEditRange = getSelection().getRangeAt(0);
      }
    },
    // 聚焦输入框后需要执行的操作
    focusTitle() {
      // console.log("focusTitle");
      // this.$refs.textDom.blur();
      Middleware.$emit("editorDom", this.$refs.titleDom);
    },
    focusTextarea() {
      // 如果存在记录光标，说明上次去一些非指定元素，光标重聚
      if (lastEditRange) {
        lastEditRange.collapse(false);
        // 清除选定对象的所有光标对象
        getSelection().removeAllRanges();
        // 如果有上一次光标的位置，还原光标位置
        getSelection().addRange(lastEditRange);
        lastEditRange = null;
      }
    },

光标位置插入dom元素，举例插入个emoji表情

// 插入表情
    insertEmoji(emoji) {
      // 外部调用的api
      // 插入表情的方法
      // 创建img标签并放入表情
      const emojiTag = document.createElement("img");
      emojiTag.src =
        "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAACnej3aAAAAAXRSTlMAQObYZgAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII=";
      emojiTag.alt = `[&${emoji}]`;
      emojiTag.className = "emoji";
      emojiTag.style = `background:url(${require("@/assets/emojiLib/emoji.png")}) 0 0 no-repeat; width:22px; height:22px; background-position:0 ${
        -22 * emoji
      }px; margin:-1px 1px 0px; vertical-align: middle;`;
      const range = getSelection().getRangeAt(0);
      // 删除range里面的内容
      range.deleteContents();
      // console.log(range, node)
      // 插入节点
      range.insertNode(emojiTag);
    },

效果：
在编辑的富文本中所在光标插入个emoji表情，如果没有做光标重聚或者记录，光标会自动跳到开头处，并不能插入指定位置。