vue div设置为contenteditable，通过鼠标光标位置插入图片

1、首先保存最后一次鼠标光标位置

 const selection = window.getSelection();
      // 设置最后光标对象
 this.lastEditRange = selection.getRangeAt(0);

2、重新让元素获得焦点，并将光标赋值

      let $myInput = document.getElementById(`id`);
      $myInput.focus();
      // 获取选定对象
      let selection = getSelection();
      // 判断是否有最后光标对象存在
      if (this.lastEditRange) {
        // 存在最后光标对象，选定对象清除所有光标并添加最后光标还原之前的状态
        selection.removeAllRanges();
        selection.addRange(this.lastEditRange);
      }
      let range = selection.getRangeAt(0);

3、将图片生成好dom并赋值

 const parseDom = this.parseDom(
        `<img style="height:20px" src="${val.url}" />`
 );
   range.insertNode(parseDom);

parseDom方法

   parseDom(arg) {
      var objE = document.createElement("div");
      objE.innerHTML = arg;
      return objE.childNodes[0];
    },