修改富文本 DOM 后怎样用 Range 恢复光标位置

修改富文本DOM后，可以重新创建Range，把它折叠到目标位置，再放回Selection。关键是保存怎样的“位置”：如果旧文本节点被替换，仅保存旧Range并不能表达原来的编辑意图。对只改变标签、保持文字顺序的更新，我倾向于保存编辑区内的文本偏移，再映射到新节点。

API参考地址：https://developer.mozilla.org/en-US/docs/Web/API/Selection

我会先保存文本位置，而不是旧节点

这里保护的是用户正在输入的位置。典型风险是重新渲染替换节点、工具栏抢走选区，或异步提交发生在恢复之后。以下方案限定为单个折叠光标、一个普通contenteditable编辑区；文字内容及顺序在更新前后保持不变。

书签记录从编辑区起点到光标的文本前缀长度，使用UTF-16单位。旧节点引用不能当作跨重建持久标识。

把偏移映射回新文本节点

下面的原创示例把编辑区文字包进strong，随后按相同文本计量恢复。它没有在本机执行，不表示完整编辑器实现。

// 仅支持单个折叠光标，以及文字顺序不变的标记重建
function saveCaret(root) {
  const sel = root.ownerDocument.getSelection();
  if (!sel || sel.rangeCount === 0 || !sel.isCollapsed) return null;
  const range = sel.getRangeAt(0);
  if (!root.contains(range.startContainer)) return null;
  const prefix = root.ownerDocument.createRange();
  prefix.selectNodeContents(root);
  prefix.setEnd(range.startContainer, range.startOffset);
  // 用文本节点的UTF-16长度记录位置，不把换行标签视为字符
  return prefix.cloneContents().textContent.length;
}
function restoreCaret(root, position) {
  if (!Number.isInteger(position) || position 

文本节点中的setStart偏移是字符位置；根元素中的偏移是子节点位置。示例只在空内容时把根元素的零偏移作为起点。新Range折叠后代表光标，再清除原Selection范围并加入它。

我会把复杂编辑交给文档模型

这种方案的代价是文本遍历，收益是少量标记重建时实现简单。但它不计算br、图片、块元素换行等视觉位置；同一文本边界也可能有多种DOM表示。插入或删除文字、协同编辑、双向选区和原子组件，应使用编辑器文档模型的位置映射。输入法组合输入期间，也不应每次输入都强制重建DOM。

框架中应在真实DOM提交后恢复，并保存到对应编辑区；若用户已经主动切换焦点，应由交互策略决定是否放弃恢复，避免后台更新抢回光标。生产代码还应限制可编辑区域内的非文本组件和不可编辑内容，不能把本例当作通用富文本修复函数。

常见问题

cloneRange能否解决所有重渲染问题？

不能。复制的Range仍关联DOM边界，不是独立文档坐标；节点替换后需要新的映射规则。

可以恢复用户反向拖选的范围吗？

本例只恢复折叠光标，明确拒绝非折叠选区。完整选区还需保存两个端点和方向。

Range边界及选区写回参考：https://developer.mozilla.org/en-US/docs/Web/API/Range/setStart；https://developer.mozilla.org/en-US/docs/Web/API/Selection/addRange。