js光标定位+回显

监听光标变化，并获取变化后的位置

  document.addEventListener("selectionchange", function (e) {
      
      const selection = window.getSelection();
      const range = selection!.getRangeAt(0);
      const startOffset = range.startOffset;
      const endOffset = range.endOffset;
  
      sessionStorage.setItem("startOffset", startOffset.toString());
      sessionStorage.setItem("endOffset", endOffset.toString());
    });

光标回显

function setCursorPosition() {
  const tagId = sessionStorage.getItem("editId") || ""
  const startOffset = sessionStorage.getItem("startOffset") || ""
  const endOffset = sessionStorage.getItem("endOffset") || ""
  if(tagId === "" || startOffset === "" || endOffset === "") return
  
  const selection = window.getSelection();
  const range = document.createRange();
  const element = document.getElementById(tagId);
  const textNode = element?.firstChild;
  if (!textNode) return;
  
  range.setStart(textNode, parseInt(startOffset, 10));
  range.setEnd(textNode, parseInt(endOffset, 10));
  selection!.removeAllRanges();
  selection!.addRange(range);
}

注意，这种写法来定位光标和回显是非常灵活的，只要你是可编辑的状态，就可以定位+回显，和以往的方法不一样，以往的大多只局限于文本域本编辑框，这种方法适用于一切可编辑态。但这里借助了sessionStorage来存储数据和取出数据，所以在代码上有些改动，如果需要使用，请按照自己的业务场景修改