Vue可编辑div组件------解决插入emoji时的光标问题

大神原文
https://segmentfault.com/a/1190000005869372

1.记录光标最后位置

//1. data()
lastEditRange: ''

// 2. 给可编辑div绑定keyup事件、click事件
recordLastEditRange() {
   
    // 获取选定对象
    const selection = getSelection()
    // 设置最后光标对象
   this.lastEditRange = selection.getRangeAt(0)
}

2. 插入emoji

selection: 点击任何一个可编辑区域，就会产生一个selection选中对象（鼠标选中一段文字变成蓝色的那个方块），有且只存在一个。

range：不断闪烁的光标，是selection对象的一个东西，这里主要操作range

    selectEmoji(emoji) {
   
      // 可编辑div
      const inp = this.$refs.inpMsgRef
      inp.focus()
      // 获取选定对象
      var selection = getSelection()
     
      // 1. 判断是否有最后光标对象存在