后重置文本颜色为默认值
" />
在 contenteditable 区域中插入带样式的 <span> 后，后续输入文字会继承该 <span> 的颜色样式；解决方法是在插入后手动追加一个不换行空格（\u00A0），使光标脱离样式作用范围，恢复浏览器默认文本颜色。
在 `contenteditable` 区域中插入带样式的 `` 后，后续输入文字会继承该 `` 的颜色样式；解决方法是在插入后手动追加一个不换行空格（`\u00a0`），使光标脱离样式作用范围，恢复浏览器默认文本颜色。
在富文本编辑场景中，使用 document.execCommand() 或原生 Range API 插入自定义样式元素（如红色文字的 <span>）是常见需求。但一个易被忽视的问题是：插入后光标若停留在 <span> 内部或其末尾，后续键入的文字将自动继承该 <span> 的 color 样式——即使用户期望新内容使用编辑器默认颜色（如黑色）。
根本原因在于：contenteditable 的样式继承机制会将光标当前所在节点的 color 作为新文本的默认样式。当 surroundContents() 将选区包裹进 <span style="color:red"> 后，光标通常停留在该 <span> 内部，导致后续输入持续“染色”。
✅ 可靠解决方案：插入不可见的格式重置锚点
在插入 <span> 并聚焦后，向 contenteditable 元素末尾追加一个 Unicode 不换行空格（\u00A0），它本身无样式、不触发渲染换行，却能创建一个独立于 <span> 样式的空白文本节点。当光标移至此处时，将采用父容器（即 <div contenteditable>）的默认 color，从而实现“颜色重置”。
以下是优化后的完整实现：
function insertSpan() {
const span = document.createElement("span");
span.style.color = "red";
span.textContent = "<insert text>";
const selection = getSelection();
if (!selection.rangeCount) return;
const range = selection.getRangeAt(0);
range.surroundContents(span);
const editableDiv = document.querySelector("div[contenteditable]");
editableDiv.focus();
// 关键修复：追加不可见空格，重置光标样式上下文
editableDiv.appendChild(document.createTextNode("\u00A0"));
// 可选：将光标移动到新插入的空格位置，确保用户从“干净”状态开始输入
const lastNode = editableDiv.lastChild;
const newRange = document.createRange();
newRange.selectNodeContents(lastNode);
newRange.collapse(false); // 光标置于末尾
selection.removeAllRanges();
selection.addRange(newRange);
}⚠️ 注意事项：
- 不要使用普通空格 ' ' —— 它可能被浏览器合并或忽略；\u00A0（NO-BREAK SPACE）具有明确的 DOM 节点语义，更稳定；
- 若需支持多浏览器兼容性（尤其旧版 Safari），建议在追加前检查 lastChild 是否为文本节点，避免重复插入；
- 更健壮的方案可结合 document.execCommand('removeFormat', false, null) 清除当前格式，但该 API 已废弃，不推荐用于新项目；
- 现代替代方案（如基于 InputEvent 或 beforeinput 监听）更适合复杂编辑器，但本例中 \u00A0 方案简洁、零依赖、兼容性极佳。
通过这一微小却关键的 DOM 操作，即可优雅地切断样式继承链，在保持功能完整性的同时，保障用户输入体验的一致性与可预期性。
