本文介绍两种在 contenteditable 区域中精准将 html 插入当前光标位置的方法：兼容性良好的 document.execcommand("inserthtml")（虽已弃用但广泛支持），以及更现代、推荐使用的原生 selection + range api 方案。
本文介绍两种在 contenteditable 区域中精准将 html 插入当前光标位置的方法：兼容性良好的 document.execcommand("inserthtml")（虽已弃用但广泛支持），以及更现代、推荐使用的原生 selection + range api 方案。
在富文本编辑场景中，用户常期望点击按钮后，自定义 HTML（如带样式的 <span>、链接或组件）能准确出现在光标所在处，而非简单追加到容器末尾。原始代码通过 append() 将元素绝对定位到 div_edit 的左上角，这既偏离了光标位置，也破坏了文档流——真正的解决方案需操作浏览器的选区（Selection）与范围（Range）。
✅ 推荐方案一：使用 Selection 和 Range（现代标准）
这是目前最可靠、符合规范的做法，不依赖已废弃的 execCommand，且完全可控：
const insertBtn = document.querySelector("#myBtn");
const editable = document.querySelector("#div_edit");
insertBtn.addEventListener("click", () => {
const selection = window.getSelection();
if (!selection.rangeCount) return; // 确保有有效选区
const range = selection.getRangeAt(0);
range.collapse(false); // 折叠至光标末端（true=起点，false=终点，通常用false实现“插入光标后”）
const span = document.createElement("span");
span.className = "span-add";
span.textContent = "Add a link";
range.insertNode(span);
// 可选：将光标移至新插入节点后，保持自然编辑流
const nextRange = range.cloneRange();
nextRange.setStartAfter(span);
nextRange.collapse(true);
selection.removeAllRanges();
selection.addRange(nextRange);
});注意：range.collapse(false) 表示将光标定位在插入内容之后；若希望光标落在新元素内部（如可继续输入），可改用 setStart(span, 0) 并重新设置选区。
⚠️ 兼容方案二：document.execCommand("insertHTML")
尽管 MDN 明确标注 execCommand 已废弃，但在 Chrome、Firefox、Edge 和 Safari（截至 Safari 17+）中仍稳定运行，适合快速原型或需支持旧版 IE 的项目：
立即学习“前端免费学习笔记（深入）”；
document.querySelector("#myBtn").addEventListener("click", () => {
document.execCommand("insertHTML", false, '<span class="span-add">Add a link</span>');
});该方法自动识别当前焦点内的 contenteditable 元素及光标位置，无需手动管理选区，代码极简，但无法控制插入后光标位置，且未来可能被彻底移除。
? 常见误区与修复要点
- ❌ 错误使用 append() 或 innerHTML +=：它们无视光标，仅操作 DOM 树末端；
- ❌ 忽略选区有效性：调用 getRangeAt(0) 前必须检查 selection.rangeCount > 0，否则抛错；
- ❌ 未处理 contenteditable 失焦：确保用户点击按钮前，编辑区域仍处于聚焦状态（可通过 editable.focus() 主动聚焦）；
- ✅ 最佳实践：为插入的节点添加 tabindex="-1" 或 contenteditable="false"，防止其被意外编辑。
? 总结
| 方案 | 兼容性 | 维护性 | 灵活性 | 推荐度 |
|---|---|---|---|---|
| Selection + Range | ✅ 所有现代浏览器 | ✅ W3C 标准，长期支持 | ⭐⭐⭐⭐⭐（可精确控制光标、样式、事件） | ★★★★★ |
| execCommand("insertHTML") | ✅ IE9+ / 主流浏览器 | ❌ 已废弃，无未来保障 | ⭐⭐（仅插入，不可定制后续行为） | ★★☆☆☆（仅作过渡） |
建议新项目统一采用 Selection + Range 方案，并封装为可复用函数（如 insertAtCaret(element, htmlOrNode)），兼顾健壮性与可扩展性。
