Draft JS编辑器换行时滚动异常问题求助

DevOps 小满

2026-6-30

针对 Draft.js + React-Draft-Wysiwyg 换行后新行隐藏问题的解决方案

问题说明

按下回车键后新行初始处于隐藏状态，输入2个字符后编辑器突然向下跳转，该行才重新可见。使用的依赖版本：

draft-js: ^0.11.7
react-draft-wysiwyg: ^1.15.0

可行解决方法

1. 升级依赖版本

该版本组合存在已知的渲染与滚动兼容问题，尝试升级到最新的兼容版本：

将 react-draft-wysiwyg 升级至 ^1.15.1 或更高版本
保持 draft-js 版本为 ^0.11.7（新版本 Draft.js 可能与旧版 react-draft-wysiwyg 不兼容）

2. 禁用自动调整高度

在编辑器配置中关闭 autoAdjustHeight 选项，手动控制容器高度：

<Editor
  editorState={editorState}
  onEditorStateChange={handleEditorChange}
  toolbar={{}}
  autoAdjustHeight={false}
  style={{ height: '500px', overflow: 'auto' }}
/>

3. 手动控制光标滚动

在 onEditorStateChange 事件中，手动将滚动位置定位到当前光标处：

const handleEditorChange = (newEditorState) => {
  setEditorState(newEditorState);
  // 手动滚动到光标位置
  const selection = newEditorState.getSelection();
  if (selection.getAnchorKey()) {
    const node = document.querySelector(`[data-offset-key="${selection.getAnchorKey()}-${selection.getAnchorOffset()}-0"]`);
    if (node) {
      node.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
    }
  }
};