如何解决 React 中 contentEditable 元素光标错位问题

在 React 中使用 contentEditable 实现富文本编辑器时，若通过 dangerouslySetInnerHTML 动态更新 HTML 内容，会导致浏览器重置光标位置至开头或末尾异常，本文提供基于 Range + Selection 的精准光标恢复方案。

在 react 中使用 `contenteditable` 实现富文本编辑器时，若通过 `dangerouslysetinnerhtml` 动态更新 html 内容，会导致浏览器重置光标位置至开头或末尾异常，本文提供基于 range + selection 的精准光标恢复方案。

当使用 dangerouslySetInnerHTML 更新 contentEditable 元素的 HTML 内容时，React 会销毁并重建 DOM 节点，导致原光标（selection）丢失——这是光标“卡在左侧”“输入时倒序”等现象的根本原因。单纯调用 e.target.focus() 无法恢复插入点，必须手动重建选区（Selection）。

✅ 正确解决方案：精确控制光标位置

核心思路是：每次内容更新后，将光标强制定位到编辑区域末尾（或上一次位置）。推荐采用 Range + Selection API 实现稳定聚焦：

function restoreCursorToEnd() {  const editor = document.getElementById('content');  if (!editor) return;  const range = document.createRange();  const selection = window.getSelection();  // 将光标置于最后一个子节点末尾（兼容纯文本/HTML混合结构）  range.selectNodeContents(editor);  range.collapse(false); // collapse to end  selection.removeAllRanges();  selection.addRange(range);}useEffect(() => {  restoreCursorToEnd();}, [content]);

⚠️ 注意：需为 contentEditable 元素添加唯一 id="content"（如示例中所示），否则无法精准获取 DOM 引用。

? 集成到你的编辑器组件中

1. 添加 id 属性：确保 <div className="text-editor" id="content" ... /> 存在；
2. 引入 useEffect：在组件顶部导入 useEffect；
3. 绑定副作用：监听 content 变化，触发光标恢复；
4. 移除冗余 focus：删除 onInput 中的 e.target.focus()（它无效且可能干扰）；

完整关键代码段如下：

// ... 其他 useState 声明 ...useEffect(() => {  const editor = document.getElementById('content');  if (!editor) return;  const range = document.createRange();  const selection = window.getSelection();  range.selectNodeContents(editor);  range.collapse(false); // 光标置于内容末尾  selection.removeAllRanges();  selection.addRange(range);}, [content]);return (  <div className="editor-wrapper">    {/* 工具栏保持不变 */}    <div      id="content"      className="text-editor"      contentEditable="true"      dir="ltr"      dangerouslySetInnerHTML={{ __html: content }}      onInput={(e) => setContent(e.target.innerHTML)} // ✅ 移除 e.target.focus()    />  </div>);

? 进阶建议与注意事项

• 性能优化：若编辑频繁，可考虑节流 restoreCursorToEnd 或仅在格式操作后触发（而非每次 onInput）；
• 光标记忆：如需保留用户原始光标位置（非仅末尾），需结合 getSelection() 在更新前捕获位置，再用 range.setStart() 精准还原；
• 兼容性提醒：document.execCommand 已废弃，生产环境建议迁移到 Draft.js、Slate 或 Tiptap 等现代编辑器框架；
• 安全警告：dangerouslySetInnerHTML 存在 XSS 风险，务必对 content 做 HTML 清洗（如使用 DOMPurify.sanitize()）。

通过该方案，光标将始终跟随用户输入节奏，彻底解决“输入时字符反向堆积”“手动移动后立即跳回”等典型问题，为自研轻量级富文本编辑器提供可靠基础。