React中Lexical富文本框固定尺寸、动态调整及溢出处理问题

1. 设置初始宽高 #

直接给Lexical编辑器的容器元素添加CSS样式即可，和是否使用工具栏无关。你可以用内联样式或者CSS类来定义：

import { LexicalComposer, RichTextPlugin } from '@lexical/react';
import { ContentEditable } from '@lexical/react/LexicalContentEditable';
import { HistoryPlugin } from '@lexical/react/LexicalHistoryPlugin';

function MyEditor() {
  return (
    <LexicalComposer initialConfig={{ namespace: 'MyEditor' }}>
      {/* 给容器设置初始宽高 */}
      <div style={{ width: '600px', height: '400px', border: '1px solid #eee' }}>
        <RichTextPlugin
          contentEditable={<ContentEditable />}
          placeholder={<div>输入内容...</div>}
        />
        <HistoryPlugin />
      </div>
    </LexicalComposer>
  );
}

如果需要更精细控制可编辑区域的样式，也可以直接给<ContentEditable>加style：

<ContentEditable style={{ height: '100%', width: '100%', overflow: 'auto' }} />

2. 动态调整尺寸 #

借助React状态绑定容器的宽高属性，就能实现动态调整，不需要依赖Lexical特殊API：

import { useState } from 'react';

function MyEditor() {
  const [editorSize, setEditorSize] = useState({ width: '600px', height: '400px' });

  // 示例：点击按钮调整尺寸
  const resizeEditor = () => {
    setEditorSize({ width: '800px', height: '500px' });
  };

  return (
    <div>
      <button onClick={resizeEditor}>放大编辑器</button>
      <LexicalComposer initialConfig={{ namespace: 'MyEditor' }}>
        <div style={{ ...editorSize, border: '1px solid #eee' }}>
          <RichTextPlugin
            contentEditable={<ContentEditable style={{ height: '100%', width: '100%' }} />}
            placeholder={<div>输入内容...</div>}
          />
          <HistoryPlugin />
        </div>
      </LexicalComposer>
    </div>
  );
}

3. 固定尺寸禁止自动增长 #

分两种场景实现：

场景1：溢出时滚动隐藏 #

给容器设置固定宽高，同时给可编辑区域添加overflow: auto，内容超过容器尺寸时会自动出现滚动条：

<div style={{ width: '600px', height: '400px', border: '1px solid #eee' }}>
  <RichTextPlugin
    contentEditable={<ContentEditable style={{ height: '100%', width: '100%', overflow: 'auto' }} />}
    placeholder={<div>输入内容...</div>}
  />
</div>

场景2：达到尺寸后阻止继续输入 #

通过Lexical的useLexicalEditor钩子获取编辑器实例，监听内容高度变化，当内容超过容器高度时禁用输入：

import { useLexicalEditor } from '@lexical/react';
import { useEffect, useRef } from 'react';

function MyEditor() {
  const editor = useLexicalEditor();
  const containerRef = useRef(null);

  useEffect(() => {
    if (!editor || !containerRef.current) return;

    const checkContentHeight = () => {
      const containerHeight = containerRef.current.offsetHeight;
      const contentHeight = editor.getRootElement().offsetHeight;
      // 内容高度超过容器时，禁用编辑器
      editor.setEditable(contentHeight <= containerHeight);
    };

    // 监听编辑器内容更新
    const unregister = editor.registerUpdateListener(({ editorState }) => {
      checkContentHeight();
    });

    // 初始化时检查一次
    checkContentHeight();

    return unregister;
  }, [editor]);

  return (
    <LexicalComposer initialConfig={{ namespace: 'MyEditor' }}>
      <div ref={containerRef} style={{ width: '600px', height: '400px', border: '1px solid #eee' }}>
        <RichTextPlugin
          contentEditable={<ContentEditable style={{ height: '100%', width: '100%' }} />}
          placeholder={<div>输入内容...</div>}
        />
        <HistoryPlugin />
      </div>
    </LexicalComposer>
  );
}

如果不想完全禁用编辑器，也可以改成显示提示文案，同时通过自定义命令拦截输入事件。

4. 切换自动增长模式 #

用状态控制是否开启自动增长，自动增长时设置height: auto，固定尺寸时使用预设的固定高度：

import { useState } from 'react';

function MyEditor() {
  const [isAutoGrow, setIsAutoGrow] = useState(true);
  const [fixedSize, setFixedSize] = useState({ width: '600px', height: '400px' });

  return (
    <div>
      <button onClick={() => setIsAutoGrow(!isAutoGrow)}>
        {isAutoGrow ? '切换为固定尺寸' : '切换为自动增长'}
      </button>
      <LexicalComposer initialConfig={{ namespace: 'MyEditor' }}>
        <div style={{
          width: fixedSize.width,
          height: isAutoGrow ? 'auto' : fixedSize.height,
          maxHeight: isAutoGrow ? '800px' : 'none', // 可选：限制自动增长的最大高度
          border: '1px solid #eee',
          overflow: isAutoGrow ? 'visible' : 'auto'
        }}>
          <RichTextPlugin
            contentEditable={<ContentEditable style={{ width: '100%', minHeight: isAutoGrow ? '200px' : '100%' }} />}
            placeholder={<div>输入内容...</div>}
          />
          <HistoryPlugin />
        </div>
      </LexicalComposer>
    </div>
  );
}

自动增长模式下，编辑器会随内容高度自动扩展，设置minHeight可以保证初始有足够的输入空间；固定模式则回到固定尺寸+滚动的逻辑。

内容的提问来源于stack exchange，提问作者YYT