在 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 引用。
Orderly Sdk React Hooks下载Orderly React SDK 钩子使用参考指南，包括 useOrderEntry、usePositionStream、useOrderbookStream、useCollateral 等。
? 集成到你的编辑器组件中
- 添加 id 属性：确保 存在；
- 引入 useEffect：在组件顶部导入 useEffect；
- 绑定副作用：监听 content 变化，触发光标恢复；
- 移除冗余 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>
);<h3>? 进阶建议与注意事项</h3>
<ul>
<li>
<strong>性能优化</strong>：若编辑频繁，可考虑节流 restoreCursorToEnd 或仅在格式操作后触发（而非每次 onInput）；</li>
<li>
<strong>光标记忆</strong>：如需保留用户原始光标位置（非仅末尾），需结合 getSelection() 在更新前捕获位置，再用 range.setStart() 精准还原；</li>
<li>
<strong>兼容性提醒</strong>：document.execCommand 已废弃，生产环境建议迁移到 <a href="https://www.php.cn/link/7f2f12c8fcb71fa4e15106a8dfc3fdee" rel="nofollow" target="_blank">Draft.js</a>、<a href="https://www.php.cn/link/6556b0f81751f8bc47d5d559eb04a114" rel="nofollow" target="_blank">Slate</a> 或 <a href="https://www.php.cn/link/2bfe367f6f040df48462a1a9a684ea43" rel="nofollow" target="_blank">Tiptap</a> 等现代编辑器框架；</li>
<li>
<strong>安全警告</strong>：dangerouslySetInnerHTML 存在 XSS 风险，务必对 content 做 HTML 清洗（如使用 DOMPurify.sanitize()）。</li>
</ul>
<p>通过该方案，光标将始终跟随用户输入节奏，彻底解决“输入时字符反向堆积”“手动移动后立即跳回”等典型问题，为自研轻量级富文本编辑器提供可靠基础。</p>
</div>
