后重置文本颜色为默认值 " />

在 contenteditable 区域中插入带样式的 后，后续输入文字会继承该 的颜色样式；解决方法是在插入后手动追加一个不换行空格（\u00A0），使光标脱离样式作用范围，恢复浏览器默认文本颜色。

在 `contenteditable` 区域中插入带样式的 `` 后，后续输入文字会继承该 `` 的颜色样式；解决方法是在插入后手动追加一个不换行空格（`\u00a0`），使光标脱离样式作用范围，恢复浏览器默认文本颜色。

在富文本编辑场景中，使用 document.execCommand() 或原生 Range API 插入自定义样式元素（如红色文字的 ）是常见需求。但一个易被忽视的问题是：插入后光标若停留在 内部或其末尾，后续键入的文字将自动继承该 的 color 样式——即使用户期望新内容使用编辑器默认颜色（如黑色）。

根本原因在于：contenteditable 的样式继承机制会将光标当前所在节点的 color 作为新文本的默认样式。当 surroundContents() 将选区包裹进 后，光标通常停留在该 内部，导致后续输入持续“染色”。

✅ 可靠解决方案：插入不可见的格式重置锚点
在插入 并聚焦后，向 contenteditable 元素末尾追加一个 Unicode 不换行空格（\u00A0），它本身无样式、不触发渲染换行，却能创建一个独立于 样式的空白文本节点。当光标移至此处时，将采用父容器（即

）的默认 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);
}</insert>

⚠️ 注意事项：

• 不要使用普通空格 ' ' —— 它可能被浏览器合并或忽略；\u00A0（NO-BREAK SPACE）具有明确的 DOM 节点语义，更稳定；
• 若需支持多浏览器兼容性（尤其旧版 Safari），建议在追加前检查 lastChild 是否为文本节点，避免重复插入；
• 更健壮的方案可结合 document.execCommand('removeFormat', false, null) 清除当前格式，但该 API 已废弃，不推荐用于新项目；
• 现代替代方案（如基于 InputEvent 或 beforeinput 监听）更适合复杂编辑器，但本例中 \u00A0 方案简洁、零依赖、兼容性极佳。

通过这一微小却关键的 DOM 操作，即可优雅地切断样式继承链，在保持功能完整性的同时，保障用户输入体验的一致性与可预期性。