react 在文章焦点位置插入图片，跳转别的页面，选择图片后添加到文章末尾，而不是焦点位置解决方法

写项目遇到一个难题，用富文本编辑器添加图片，添加图片按钮是自己写的，不是编辑器自带的，点击添加图片后，跳转到别的页面。

当想在焦点位置添加图片，但实际选择完图片后回到原来页面却添加至末尾
在点击按钮跳转图片时，思路，先获取到焦点位置，在焦点位置插入一个标签，跳转回来时，根据这个标签查找所在位置，在前面添加图片，同时删除这个标签。
防止跳转到别的页面，回到原来页面后，原本编辑器的内容不存在，使用本地存储

  selectPics = () => {
    var range;//记录光标位置对象
    var node = window.getSelection().anchorNode;
    // 这里判断是做是否有光标判断，因为弹出框默认是没有的
    if (node != null) {
      range = window.getSelection().getRangeAt(0);// 获取光标起始位置
    } else {
      range = undefined;
    }
    // console.log(range);
    var doc = document.createElement("div");//创建节点对象
    doc.setAttribute("id", "dvs");//给节点对象添加属性
    range.insertNode(doc);// 在光标位置插入该对象
    // console.log(this.state.editorContent);
    localStorage.setItem("ThisState", JSON.stringify(this.state));
    this.props.history.push({
      pathname: '/detail/chartsManage',
      state: {
        option: 'selectSpecial',
        optionTemp: this.state.optionState.option
      }
    })
  }

      const ThisState = JSON.parse(localStorage.getItem("ThisState"));
      let cons = localStorage.getItem("con")
      // console.log(cons);

      editor.txt.html(cons);
      let picsString = "";
      if (optionState.list) {
        optionState.list.forEach(item => {
          picsString += "<img src=" + item.url + " imgname=" + item.name + " style='font-size: 14px; max-width: 100%;'/>"
        })
        if (cons) {
          // console.log(cons.indexOf('<div id="dvs"></div>'));
          // str.slice(0,5)+'-local'+str.slice(5)
          let str = `${cons.slice(0, cons.indexOf('<div id="dvs"></div>'))}${picsString}${cons.slice(cons.indexOf('<div id="dvs"></div>'))}`;
          // console.log(str.replace('<div id="dvs"></div>', ""));
          cons = str.replace('<div id="dvs"></div>', "")
        }
      } else {
        if (cons) {
          cons = cons.replace('<div id="dvs"></div>', "")
        }

      }