React contentEditable元素光标错位问题修复方法

时间：2026-07-16 06:31

React中contentEditable元素使用dangerouslySetInnerHTML更新内容时，光标会因DOM重建而重置。通过Range与SelectionAPI手动重建选区，将光标定位至内容末尾，可精准恢复光标位置。需为元素添加唯一id，并在useEffect中监听内容变化执行恢复。此方案有效解决光标错位问题，适用于自建轻量富文本编辑器。

在 React 开发中，若使用 contentEditable 实现富文本编辑器，并通过 dangerouslySetInnerHTML 动态更新 HTML 内容，浏览器常会重置光标位置至开头或末尾，造成输入体验异常。本文提供一套基于 Range + Selection 的精准光标恢复方案，有效解决 React contentEditable 光标错位问题。

React 搭配 contentEditable 构建富文本编辑器，这一组合并不冷门，但其中的坑点却不少。最令人头疼的常见问题，便是当使用 dangerouslySetInnerHTML 更新 HTML 内容时，浏览器如同被重置了一样，光标要么跳到开头，要么回到末尾，导致输入字符反向堆积，用户体验极差。

问题的根源其实并不复杂：React 为了更新 DOM，通常会销毁并重建节点。而光标（Selection）作为一个“易失性”的状态，在此过程中自然会丢失。单纯调用 e.target.focus() 根本无济于事，因为浏览器并不知道该把光标“塞回”哪个位置。

✅ 正确的解决思路：精确接管光标位置

核心逻辑其实只有一句话：每次内容更新后，手动将光标“钉”到它该去的地方（比如末尾或上一次操作的位置）。既然浏览器默认行为不可靠，我们就需要借助 Range + Selection API 手动重建选区，让浏览器乖乖听话。

下面给出一个简洁的实现，先将光标强制放置到编辑器末尾：

function restoreCursorToEnd() {
  const editor = document.getElementById('content');
  if (!editor) return;

  const range = document.createRange();
  const selection = window.getSelection();

  // 将光标定位到编辑器内容的末尾
  range.selectNodeContents(editor);
  range.collapse(false); // collapse to end

  selection.removeAllRanges();
  selection.addRange(range);
}

useEffect(() => {
  restoreCursorToEnd();
}, [content]);