React中CKEditor 5编辑器高度适配窗口的优化方案问询

核心思路 #

• 普通模式下：让编辑器编辑区域高度适配剩余视口空间，避免页面整体滚动，同时保留最小展示高度
• 全屏模式下：解除高度限制，让编辑器占满整个屏幕

具体实现 #

1. 基础CSS样式（替代原vw方案） #

/* 普通模式下的编辑器编辑区域 */
.ck-editor__editable {
  /* 空编辑器的最小高度，可根据需求调整 */
  min-height: 200px;
  /* 计算可用高度：视口高度减去工具栏、页面顶部导航/边距的总高度，示例中按120px估算，需根据实际布局调整 */
  max-height: calc(100vh - 120px);
  /* 内容超出时，编辑区域内部滚动，保证工具栏始终可见 */
  overflow-y: auto;
  /* 仅保留垂直拖拽调整，避免水平拖拽破坏页面布局 */
  resize: vertical;
}

/* 全屏模式下解除高度限制 */
.ck-full-screen .ck-editor__editable {
  min-height: auto;
  max-height: 100vh;
  height: 100vh;
  resize: none;
}

2. 可选：React中动态适配窗口变化（精准适配复杂布局） #

如果页面存在动态高度元素（比如可折叠的顶部导航），可以在组件中监听窗口 resize 事件，实时计算编辑器可用高度：

import { useEffect, useRef } from 'react';
import { CKEditor } from '@ckeditor/ckeditor5-react';
import ClassicEditor from '@ckeditor/ckeditor5-build-classic';

const EditorComponent = () => {
  const editorEditableRef = useRef(null);

  useEffect(() => {
    const updateEditorHeight = () => {
      if (!editorEditableRef.current) return;
      // 获取页面固定元素（如顶部导航）的实际高度
      const headerHeight = document.querySelector('.page-header')?.offsetHeight || 60;
      // 计算编辑区域最大高度：视口高度 - 导航高度 - 工具栏+边距高度（示例60px）
      const maxHeight = `calc(100vh - ${headerHeight + 60}px)`;
      editorEditableRef.current.style.maxHeight = maxHeight;
    };

    // 初始化时设置一次高度
    updateEditorHeight();
    // 监听窗口尺寸变化
    window.addEventListener('resize', updateEditorHeight);
    return () => window.removeEventListener('resize', updateEditorHeight);
  }, []);

  return (
    <div className="editor-container">
      <CKEditor
        editor={ClassicEditor}
        onReady={(editor) => {
          // 获取编辑区域DOM元素的引用
          editorEditableRef.current = editor.ui.getEditableElement();
        }}
        // ...其他编辑器配置
      />
    </div>
  );
};

export default EditorComponent;

3. 注意事项 #

• 调整calc(100vh - 120px)中的数值时，需结合实际页面布局（比如顶部导航高度、编辑器上下边距），确保编辑区域不会超出视口触发页面滚动
• 启用全屏插件后，CKEditor会自动给编辑器容器添加.ck-full-screen类，利用这个类可以精准覆盖普通模式的样式规则
• 保留overflow-y: auto，让内容超出时在编辑区域内部滚动，确保工具栏始终处于可视范围

内容的提问来源于stack exchange，提问作者D. Barman