在光标位置插入内容的问题

[ihewro]

请先看《提问的智慧》，并尝试到黑客派搜寻资料解决问题。

---

编辑模式

• wysiwyg 所见即所得模式
• ir 即时渲染模式
• sv 分屏编辑预览模式

描述问题

https://vditor.b3log.org/demo/method-CRUD.html

这个页面中一开始鼠标点在的用户较为友好，此处文字的后面，
然后点击一下编辑框的外部页面区域，
再次点击在光标位置插入内容按钮，插入的内容插入在编辑器的开头，而不是最后的光标位置

这个需求的场景是，上面的toolbar 自定义了一个事件，点击后出现一个弹窗，然后弹窗中填了一些文字，点击确定，插入文字到编辑器中，结果插入到编辑器的开头位置了

期待的结果

希望点击编辑器外面的页面区域，仍然能记录最后点击编辑器的光标位置

[88250]

嗯，应该记录最近 n 次光标位置，方便追溯。

[Vanessa219]

我也遇到这个问题了，目前临时把 range 存在一个变量里面。看来还是需要解决一下的。

[ttshangxiang]

我也遇到这个问题了，目前临时把 range 存在一个变量里面。看来还是需要解决一下的。

你好，请问怎么获取与设置range？

[Vanessa219]

目前只能直接使用 JS API getSelection

[KCVO1995]

JS API getSelection 只能获取，但是不能设置光标呀，要怎么解决

[Vanessa219]

    const selection = window.getSelection();
    selection.removeAllRanges();
    selection.addRange(range);

[dowdyboy]

有需要的话可参考我写的以下代码：

function focusToEnd(){
  contentEditor.focus()
  const selection = window.getSelection();
  if (selection != null){
    const dom = document.querySelector('#vditorContainer div.vditor-content div.vditor-wysiwyg') as HTMLDivElement
    const pre = dom.querySelector('pre.vditor-reset')
    if (pre != null){
      console.log(pre.lastChild)
      if (pre.lastChild != null){
        selection.removeAllRanges();
        // const offset = pre.lastChild.textContent?pre.lastChild.textContent.length:0
        const range = document.createRange();
        range.setStart(pre.lastChild, 1)
        range.setEnd(pre.lastChild, 1)
        selection.addRange(range);
      }
    }
  }
}