img标签插入需javascript操作selection和range实现精准光标定位；须确保contenteditable容器可聚焦、防事件截断；插入后必须手动重置range并校验src有效性，否则导致光标错乱、404或渲染异常。
img 标签本身不支持富文本编辑器内的光标定位插入，必须靠 JavaScript 操作 selection 和 range 实现——否则点哪插哪、保持原有文字不丢失、插入后光标自动落到图片后这些基本需求全会失败。
富文本容器里插入图片前，先确保 contenteditable 正确启用
很多人卡在第一步：用 div[contenteditable="true"] 当编辑器，但没设 tabindex 或 CSS outline，导致点击无焦点、getSelection() 返回空。必须加：
-
tabindex="0"让 div 可聚焦（尤其 Safari 和 Firefox） -
user-select: text防止双击选中整个容器 - 避免父级有
pointer-events: none或overflow: hidden截断事件冒泡
用 insertNode 插入 img 时，必须手动维护 selection
直接 range.insertNode(imgEl) 后，光标常留在原处或消失，用户接着打字会覆盖图片或跑到开头。正确做法是插入后立即重置 range：
- 插入前用
sel.getRangeAt(0).cloneRange()备份原始位置 - 插入后调用
range.setStartAfter(imgEl)+range.collapse(true) - 最后
sel.removeAllRanges()再sel.addRange(range) - 别依赖
document.execCommand：它在 Chrome 90+ 已废弃，且对img插入行为不一致
src 值为空或错误路径会导致 404 并阻塞渲染
富文本里动态插入的 img，src 很多来自用户上传临时 URL 或 base64，极易出错：
- 绝对不能写
src=""或src="undefined"，浏览器会发请求到当前域名根路径，触发 404 - base64 图片要检查是否完整（以
data:image/xxx;base64,开头），缺逗号或换行会静默失败 - 相对路径如
src="uploads/123.jpg"是相对于 HTML 文件位置，不是 JS 脚本位置——本地开发时易混淆 - 建议插入前做校验：
if (!imgEl.src || imgEl.src.startsWith('http') || imgEl.src.startsWith('data:')) { /* ok */ }
插入后图片不响应式？别只靠 CSS width:100%
富文本内容常嵌在固定宽容器里，仅用 img { max-width: 100%; height: auto; } 不够：
- 如果编辑器容器本身没设
width或用了flex布局，max-width: 100%会失效 - 需额外加
display: block，否则img默认 inline，可能受换行符影响留白 - 更稳妥的是插入时就带内联样式：
imgEl.style.cssText = "max-width:100%;height:auto;display:block;" - 若要适配 Retina 屏，
srcset必须在插入时一并写入，运行时补加无效
真正难的不是插入动作本身，而是每次插入都得重新捕获、克隆、重置 selection——稍漏一步，用户就会发现光标乱跳、文字被吞、图片叠在一起。这些细节在 console 里几乎不报错，只能靠反复点选 + 打印 getSelection().rangeCount 来验证。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
