动态调整受控TinyMCE React组件的大小

import { Editor } from '@tinymce/tinymce-react';

<Editor
  apiKey="YOUR_API_KEY"
  initialValue="<p>This is the initial content of the editor</p>"
  init={{
    height: 300, // 设置初始高度
    menubar: false,
    plugins: [
      'advlist autolink lists link image charmap print preview anchor',
      'searchreplace visualblocks code fullscreen',
      'insertdatetime media table paste code help wordcount'
    ],
    toolbar:
      'undo redo | formatselect | bold italic backcolor | \
      alignleft aligncenter alignright alignjustify | \
      bullist numlist outdent indent | removeformat | help'
  }}
  onEditorChange={handleEditorChange}
/>

const [editorHeight, setEditorHeight] = useState(300);

const handleResize = () => {
  const newHeight = window.innerHeight - 100; // 根据需要计算新的高度
  setEditorHeight(newHeight);
};

useEffect(() => {
  window.addEventListener('resize', handleResize);
  return () => {
    window.removeEventListener('resize', handleResize);
  };
}, []);

<Editor
  apiKey="YOUR_API_KEY"
  initialValue="<p>This is the initial content of the editor</p>"
  init={{
    height: editorHeight, // 使用动态高度
    // 其他配置项...
  }}
  onEditorChange={handleEditorChange}
/>