1. contenteditable 中的光标定位原理
1.1 光标的本质与插入点
在 contenteditable 区域中，光标被称为插入点，俗称 caret。插入点不是一个具体的可见元素，而是一个由 Selection 和 Range 表示的边界位置，通常位于文本节点之间或某个文本节点内部的某个偏移量处。
当用户使用键盘移动光标、点击鼠标或借助 JS 设置焦点时，浏览器会更新全局的 Selection 对象和一个或多个 Range 对象，以反映当前的插入点位置。你需要通过 window.getSelection() 获取当前选区，并从 range.startContainer 与 range.startOffset 得到具体的偏移。
重要点：在 contenteditable 中，光标位置往往与文本节点的边界绑定，越靠近文本节点边界，越容易实现精确控制。
function getCaretCharacterOffsetWithin(el) {var caretOffset = 0;var sel = window.getSelection();if (sel.rangeCount > 0) {var range = sel.getRangeAt(0);var preCaretRange = range.cloneRange();preCaretRange.selectNodeContents(el);preCaretRange.setEnd(range.endContainer, range.endOffset);caretOffset = preCaretRange.toString().length;}return caretOffset;
}在这段示例代码中，caretOffset 表示从编辑区域起始处到当前光标的位置字符数，这对实现文本格式化、插入模板等功能非常有用。需要注意的是，这里使用的 Range 是一个可折叠的范围，代表当前的光标位置而非选中区域的起止点。
1.2 Range 与 Selection 的工作方式
Range 对象描述了选区的起点和终点，而 Selection 表示当前活动的选区集合。在 contenteditable 的上下文中，通常我们关心的是处于折叠状态的 Range，即光标位置。
要获取光标所在的文本坐标，可以通过 range.startContainer 与 range.startOffset，以及 range.endContainer 与 range.endOffset。如果你需要知道光标在渲染上的实际像素位置，可以结合 getClientRects() 或 getBoundingClientRect()。
// 设置光标到 contenteditable 的指定偏移
function setCaretCharacterOffset(el, offset) {var range = document.createRange();var sel = window.getSelection();var walker = document.createTreeWalker(el, NodeFilter.SHOW_TEXT, null, false);var current = 0;while ((node = walker.nextNode())) {var nextLength = current + node.textContent.length;if (offset <= nextLength) {range.setStart(node, offset - current);range.collapse(true);sel.removeAllRanges();sel.addRange(range);return;}current = nextLength;}
}2. 跨浏览器的兼容性要点
2.1 浏览器对 contenteditable 的实现差异
不同浏览器在 contenteditable 的实现上存在细微差异，尤其是在内联元素、块级元素、以及空格的处理方面。Chrome、Edge、Safari、Firefox 的行为并不完全一致，这意味着在具体应用中要进行针对性测试。
在实现光标定位时，最常见的问题是光标跳跃、换行符的误读，以及对复杂嵌套结构中起始位置的判断误差。了解这些差异，有助于设计更稳健的定位算法。
一个关键点是：contenteditable 的事件模型与浏览器的内建选区 API 可能在不同版本中有不同的时序，因此要以事件驱动的方式处理光标变更。 注意：本文标题中提到的 temperature=0.6 这一组合并不改变前端定位逻辑，仅用于示例性元数据。
2.2 兼容性策略与最佳实践
最佳实践包括使用标准的 Range 和 Selection API 进行定位，而尽量避免依赖已废弃的 document.execCommand，它在未来版本中可能被移除。优先使用现代的 getSelection() 与 Range API 来实现编辑器的光标控制。
此外，处理不同内容结构时，建议对空格、换行和不可见字符进行统一处理，以避免光标在不同浏览器中的 “看起来相同，内部不同” 的现象。以下是一个简化的示例：
// 简化的剪裁与定位示例（跨浏览器）
function safeSetCaret(el, offset) {var range = document.createRange();var sel = window.getSelection();var walker = document.createTreeWalker(el, NodeFilter.SHOW_TEXT, null, false);var current = 0;while ((node = walker.nextNode())) {var next = current + node.textContent.length;if (offset <= next) {range.setStart(node, offset - current);range.collapse(true);sel.removeAllRanges();sel.addRange(range);return;}current = next;}
}3. 实践技巧：定位稳定与无障碍
3.1 如何稳定定位光标
在编辑器中实现稳定的光标定位，首先要确保焦点在 contenteditable 区域内。使用 focus()/blur() 控制焦点状态，并在内容变更前后分离定位逻辑。
其次，避免在运行时大量修改节点结构，因为这会引发浏览器重新计算选区，导致光标跳动。可以采用慢速变更（如逐步插入/删除）或将结构变更放入回调队列中执行。
另外，对复杂嵌套结构，采用可预测的占位符策略，如在需要的位置放置零宽空格（ ）或特定标记，以保持光标位置的一致性。
3.2 提高可访问性与可测试性
确保屏幕阅读器和键盘导航能够正确识别可编辑区域。使用 aria-label、role=textbox、aria-multiline 等属性，并提供键盘事件的可预期行为。
为了可测试性，记录并回放光标位置的断点，这有助于回归测试和本地化测试。你可以通过记录 offset、容纳光标的文本节点以及在编辑过程中的操作来实现。
// 记录当前光标位置的简易工具（可用于测试回放）
function captureCaret(el) {var sel = window.getSelection();if (sel.rangeCount > 0) {var r = sel.getRangeAt(0);return {startContainerPath: getNodePath(r.startContainer),startOffset: r.startOffset};}return null;
}
function getNodePath(node) {var path = [];while (node && node !== document) {var index = Array.prototype.indexOf.call(node.parentNode.childNodes, node);path.unshift(index);node = node.parentNode;}return path;
}4. 常见问题与排错方法
4.1 光标跳跃与回退
光标跳跃最常见的原因是对文本节点进行不分离的修改，或在重新构建 DOM 时没有重新设置选择区。确保每次修改后都正确重新设置光标，并在需要时通过保存与恢复的策略来避免跳跃。
为了避免误差，可以在修改前记录当前 caret 位置，在修改后通过上文提到的 setCaret/getCaret 函数重新设定。
4.2 复杂编辑场景的处理
在多段落、列表、嵌套结构中，光标定位的边界更难以预测，需要对每种节点类型制定定位策略，例如在文本节点内插入、在段落末尾追加内容等。
通过引入占位符、使用可控的占位节点、以及对 Range 进行细粒度控制，可以实现更稳健的编辑效果。
