关于可编辑div contentEditable="true" 添加表情光标设置问题

web版的聊天室对与前端来说真的是一个头疼的问题，特别是输入框显示表情，需要contentEditable属性来显示，但是contentEditable又有光标问题，插入的表情无法在光标下插入，会自动跳到最前面，还有就是输入框打开时，光标总是跳到最前面，下面是两个方法解决表情输入到光标下和自动跳到文本最后面

1、在光标后输入   //下面是vue-cli中的代码

function selectImg (item) {
      let Img = `<img class="text-emoji" name="${item.name}" src="${item.file}" />`  // img是要插入的图片表情
      let obj = this.$refs.emoji   // obj 是可编辑的div
      let range, node
      if (!obj.hasfocus) {
        obj.focus()
      }
      if (window.getSelection && window.getSelection().getRangeAt) {
        range = window.getSelection().getRangeAt(0)
        range.collapse(false)
        node = range.createContextualFragment(Img)
        let c = node.lastChild
        range.insertNode(node)
        if (c) {
          range.setEndAfter(c)
          range.setStartAfter(c)
        }
        let j = window.getSelection()
        j.removeAllRanges()
        j.addRange(range)
      } else if (document.selection && document.selection.createRange) {
        document.selection.createRange().pasteHTML(Img)
      }
    }

2、把光标设置在文本最后

keepLastIndex (obj) {   // obj 为可编辑 的div  移动端的就没做低版本的兼容
  if (window.getSelection) {
    let range = window.getSelection()// 创建range
    range.selectAllChildren(obj)// range 选择obj下所有子内容
    range.collapseToEnd()// 光标移至最后
  }
}