contenteditable容器必须加tabindex="0"确保可聚焦，否则getselection()返回空；插入图片须用range.insertnode()而非innerhtml，插入后需手动重置光标、派发input事件并滚动可视。

contenteditable容器必须可聚焦，否则getSelection()返回空

很多人写完 <div contenteditable="true"></div> 就以为能用了，结果点击无光标、getSelection() 一直返回空对象——根本原因是浏览器没把焦点真正交到这个元素上。

必须加 tabindex="0"，否则 Safari 和 Firefox 下几乎必现该问题；同时补上 user-select: text 防止双击选中整个容器；还要检查父级有没有 pointer-events: none 或 overflow: hidden 截断事件冒泡。

• tabindex="0" 是硬性要求，不是可选优化
• 别只靠 CSS outline 视觉反馈，它不解决焦点逻辑问题
• 移动端需额外测试 focus() 是否触发软键盘（iOS 常静默失败）

用range.insertNode()插入img，不能用innerHTML +=

ele.innerHTML += '<img src="...">' 看似简单，实际会重置整个 DOM 树：光标跳回开头、已绑定的事件丢失、React/Vue 的响应式链断裂。所有“点哪插哪”需求都会失效。

正确路径是：先 getSelection() → 取 getRangeAt(0) → 调用 range.insertNode(imgEl) → 再手动重置光标位置。

Doc To HTML

使用 MinerU 文档处理引擎将 Word 文档（.doc、.docx）转换为保留结构和格式的干净 HTML。

下载

• 插入前用 range.cloneRange() 备份原始位置，避免后续操作污染
• 插入后必须 range.setStartAfter(imgEl) + range.collapse(true)，否则光标悬空或卡在图片前
• IE11 不支持对 TextNode 直接 insertNode，得降级用 document.execCommand('insertHTML', false, ...) 并包 try/catch

插入后必须手动派发input事件

contenteditable 对 DOM 插入默认不触发 input 事件，导致 React 的 onChange、Vue 的 v-model、表单校验全失效——这不是 bug，是规范行为。

插入完成立刻执行：el.dispatchEvent(new Event('input', { bubbles: true }))，且要确保 DOM 已更新。

• 别用 change 或 blur 替代，它们和内容变更无关
• 如果监听逻辑带防抖，用 setTimeout(() => {}, 0) 推进到微任务队列末尾再触发
• 注意事件冒泡层级，确保监听器挂在正确的父节点上

移动端插入后需主动滚动并聚焦

iOS Safari 下，插入图片后 focus() 常静默成功但键盘不弹、输入框被遮挡——用户根本看不到刚插入的内容，也无法继续输入。

必须组合调用：el.focus() + setTimeout(() => el.scrollIntoView({ block: 'nearest' }), 0)。

• scrollIntoView 不能省略 block: 'nearest'，否则可能强制滚动到顶部
• 不要依赖 scrollIntoViewIfNeeded（已废弃且兼容性差）
• 安卓部分 WebView 需额外检测 el.scrollTop 是否变化，必要时手动调整

真正的难点不在“怎么插”，而在“插完之后光标在哪、事件有没有、用户看不看得见”。每一步都依赖浏览器底层 selection/range 的状态维护，漏掉任意一环，就会出现光标错乱、输入覆盖、事件失灵这些看似随机实则必然的问题。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！