基于contenteditable与Mark.js的文本检查器光标位置调整问题求助

我之前做类似富文本编辑功能时也碰到过这个光标跑偏的问题，结合你的需求，给你一套可行的解决方案，核心思路是利用Selection和Range API判断光标位置，再手动调整到元素的末尾：

步骤1：编写光标调整函数 #

这个函数会检查光标是否处于元素的前方，若是则将光标移动到的后方：

function adjustCursorAfterMark() {
  const selection = window.getSelection();
  // 跳过有选中内容的情况（只处理纯光标定位）
  if (!selection.rangeCount || selection.toString() !== '') return;

  const range = selection.getRangeAt(0);
  const currentNode = range.startContainer;
  const nextNode = currentNode.nextSibling;

  // 判断光标是否在<mark>元素的前一个文本节点末尾
  if (currentNode.nodeType === Node.TEXT_NODE && nextNode && nextNode.tagName === 'MARK') {
    const newRange = document.createRange();
    const markNextNode = nextNode.nextSibling;

    if (markNextNode && markNextNode.nodeType === Node.TEXT_NODE) {
      // 如果<mark>后面有文本节点，光标移到该文本节点开头
      newRange.setStart(markNextNode, 0);
    } else {
      // 如果<mark>是最后一个元素，光标移到父元素末尾
      newRange.setStart(nextNode.parentNode, nextNode.parentNode.childNodes.length);
    }
    newRange.collapse(true);

    // 更新光标位置
    selection.removeAllRanges();
    selection.addRange(newRange);
  }
}

步骤2：在Mark.js标记完成后调用函数 #

Mark.js在完成文本标记后会触发done回调，我们在这里调用上面的光标调整函数，确保DOM更新后立即修正光标位置：

const textarea = document.getElementById('textarea');
const markInstance = new Mark(textarea);

// 示例：标记关键词"some"
markInstance.mark('some', {
  className: 'c-o',
  done: function() {
    // 标记完成后调整光标
    adjustCursorAfterMark();
  }
});

补充：处理光标在内部开头的情况 #

如果你的场景中还有光标跳到元素内部开头的情况，可以在函数里补充这段判断逻辑：

// 新增：判断光标是否在<mark>元素的第一个子节点开头
if (currentNode.parentNode.tagName === 'MARK' && range.startOffset === 0) {
  const newRange = document.createRange();
  newRange.setStartAfter(currentNode.parentNode);
  newRange.collapse(true);
  
  selection.removeAllRanges();
  selection.addRange(newRange);
}

把这段代码加到adjustCursorAfterMark函数里，就能覆盖光标误入开头的场景了。

内容的提问来源于stack exchange，提问作者WeAreDoomed