contenteditable元素光标跳末尾是浏览器默认行为：dom重渲染后位置信息丢失，fallback至末尾；应避免innerhtml赋值，改用range/selection api手动维护位置。
contenteditable 元素中光标跳到末尾的常见原因
设置 contenteditable="true" 后，每次更新 innerHTML 或调用 document.execCommand（哪怕只是插入空格），光标大概率会自动跳到内容末尾——这不是 bug，而是浏览器默认行为：DOM 重渲染后，焦点节点失去原有位置信息，浏览器只能 fallback 到末尾。
实操建议：
- 避免直接赋值
innerHTML修改内容；改用range+selectionAPI 手动维护光标位置 - 若必须替换 HTML，先用
getSelection().getRangeAt(0)记录光标起始/结束 offset，再重建后用range.setStart()和range.collapse()恢复 - 注意
textContent赋值也会触发重排，同样丢失光标；它不解析 HTML，但 DOM 结构仍被重置
Firefox 下 selection.getRangeAt(0) 报错 “IndexSizeError” 的处理方式
在 Firefox 中，当编辑器为空或刚聚焦时调用 getSelection().getRangeAt(0) 很可能抛出 IndexSizeError: Index out of range。这是因为此时 selection 存在但 range 为空，不是所有浏览器都允许取第 0 个 range。
安全写法：
- 始终检查
getSelection().rangeCount > 0再取 range - 空内容时可主动创建 range：
const range = document.createRange(); range.selectNodeContents(editor); range.collapse(false); - 不要依赖
focus()后立即读取 selection —— 需加setTimeout(() => { ... }, 0)或监听selectionchange事件
移动端 Safari 中 contenteditable 失焦后无法再次聚焦的问题
iOS Safari 对 contenteditable 的 focus 管理极严格：点击输入、快速切换键盘、甚至弹出软键盘后收起，都可能导致元素“逻辑失焦”，后续 .focus() 调用无效，且无错误提示。
绕过方案：
- 给元素添加
tabindex="0"，确保其可被程序 focus - 聚焦前先触发一次
blur()再focus()，有时能重置内部状态 - 避免在
touchend中直接调用focus()；改用setTimeout(() => el.focus(), 300)，避开 iOS 的 touch-to-focus 时序冲突 - 慎用
user-select: none或-webkit-user-select: none，它们会彻底禁用光标定位
Chrome 120+ 中 execCommand 已废弃但仍需兼容的现实
document.execCommand 在 Chrome 120+ 控制台会显示 Deprecation Warning，但移除它目前不可行：Safari 仍依赖它实现粗体/列表等基础格式，且 insertHTML 等替代 API 不支持跨浏览器 selection 上下文还原。
务实策略：
- 保留
execCommand作为降级路径，同时封装一层抽象层，未来可平滑替换 - 避免使用已明确废弃的命令如
formatBlock（推荐用insertHTML+ 自定义 wrapper） - 注意
execCommand('insertText', false, 'x')在 Chrome 中会触发 input 事件，但在 Safari 中不会 —— 若依赖 input 监听，需额外 dispatch Event
<br> 为有效内容，有的只认文本节点，有的连 都不触发 selection。处理前务必用真实设备验证空态行为。
