contenteditable 元素在用户按下 Enter 后会自动插入 或 等容器节点，导致 DOM 结构动态分裂，原始 startOffset 不再对应初始文本节点位置——这是光标定位失效、区块选择错乱的根本原因。
`contenteditable` 元素在用户按下 enter 后会自动插入 `
` 等容器节点，导致 dom 结构动态分裂，原始 `startoffset` 不再对应初始文本节点位置——这是光标定位失效、区块选择错乱的根本原因。
在基于 contenteditable 的轻量编辑场景中（如 Markdown 代码块标记 ```...``` 的高亮选中），开发者常误将 Selection.startOffset 视为全局文本偏移量。但需明确：startOffset 是相对于 startContainer（一个具体 DOM 节点）的字符索引，而非整个 innerText 的线性位置。一旦用户输入换行，浏览器（尤其 Chrome/Safari）会将新行包裹进独立
，原 firstChild 文本节点被拆分，par.firstChild 不再承载全部内容，cp - 1 就可能越界或指向错误节点——这正是你调用 go_left() 时 Range 创建失败、选择崩溃的根源。
✅ 正确解法：基于文本内容定位，而非 DOM 偏移
应放弃依赖 startContainer 和 startOffset 的脆弱链式推导，改用 语义化文本扫描 + Range 构建：
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
function selectCurrentCodeBlock(editor) {
const text = editor.innerText; // 获取纯文本（无视 HTML 结构）
const sel = window.getSelection();
if (sel.rangeCount === 0) return;
const range = sel.getRangeAt(0);
const cursorPos = range.startOffset; // 注意：此处仅作参考起点，不直接用于 DOM 定位
// 1. 向前查找最近的 ``` 开头（支持 \n``` 和 ```\n）
let startIdx = text.lastIndexOf('```', cursorPos);
if (startIdx === -1 || text.substring(startIdx, startIdx + 4) !== '```\n') {
// 尝试匹配 ``` 后紧跟换行（常见 Markdown 写法）
const candidate = text.indexOf('```\n', 0);
if (candidate > -1 && candidate node.textContent.trim() ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_REJECT }
);
let node;
while (node = walker.nextNode()) {
const len = node.textContent.length;
if (count + len > targetOffset) {
return { node, offset: targetOffset - count };
}
count += len;
}
return null;
}
const startInfo = findTextNodeAtOffset(editor, startIdx);
const endInfo = findTextNodeAtOffset(editor, endIdx + 4); // +4 包含 `\n````
if (!startInfo || !endInfo) return;
const newRange = document.createRange();
newRange.setStart(startInfo.node, startInfo.offset);
newRange.setEnd(endInfo.node, endInfo.offset);
sel.removeAllRanges();
sel.addRange(newRange);
}
// 绑定按钮事件
document.querySelector('button').addEventListener('click', () => {
selectCurrentCodeBlock(document.getElementById('cstory'));
});
⚠️ 关键注意事项
-
永远不要假设 firstChild 是文本节点：contenteditable 中换行会生成 、
等块级元素，firstChild 可能是
、空或 ；- 避免 innerText 与 innerHTML 混用：innerText 适合逻辑定位（无标签干扰），innerHTML 仅用于最终渲染/存储，且必须白名单过滤防 XSS；
- CSS 必须重置：确保 .cstory { white-space: pre-wrap; word-break: break-word; }，否则连续英文/数字撑破容器，影响视觉区块判断；
- 移动端兼容性：Safari iOS 对 getSelection().getRangeAt(0).startOffset 返回值不稳定，建议增加 fallback（如 fallback 到 editor.textContent 全局索引）；
- 性能提示：对长文档频繁调用 innerText 有开销，可缓存或结合 MutationObserver 增量更新文本快照。
? 替代建议：放弃 contenteditable，拥抱现代方案
若核心需求仅为「标记并编辑代码块」，强烈推荐降级为：
- 使用
- 或采用 input[type="text"] + data-block-id 属性管理多个独立字段。
它们语义清晰、事件可控（input/change）、无障碍友好（aria-label、role="textbox"），且完全规避 DOM 分裂、光标漂移、粘贴污染等 contenteditable 固有缺陷。真正的富文本编辑，应交由成熟库（如 Tiptap 或 Lexical）处理，而非手写 Range 逻辑。
contenteditable 不是编辑器 API，它只是一个“允许光标停留”的底层开关——善用其能力，更要敬畏其限制。
