feat(editor): 优化编辑器动态加载逻辑

master
钟良源 2 months ago
parent 9d6a63f8c3
commit 63f5809c3b

@ -37,17 +37,19 @@ const EditorViewer: React.FC<{ content: string }> = ({ content }) => {
export default function EditorSection({ initialContent, visible, onChange }: EditorSectionProps) { export default function EditorSection({ initialContent, visible, onChange }: EditorSectionProps) {
const [isClient, setIsClient] = useState(false); const [isClient, setIsClient] = useState(false);
const [editorLoaded, setEditorLoaded] = useState(false);
const [currentContent, setCurrentContent] = useState(initialContent || ''); const [currentContent, setCurrentContent] = useState(initialContent || '');
const editorRef = useRef<any>(null); const editorRef = useRef<any>(null);
const editorInstanceRef = useRef<ToastEditor | null>(null); const editorInstanceRef = useRef<ToastEditor | null>(null);
useEffect(() => { useEffect(() => {
if (!isSSR) { if (!isSSR && visible && !editorRef.current) {
setIsClient(true); setIsClient(true);
// 动态导入编辑器组件 // 动态导入编辑器组件
import('@toast-ui/react-editor').then((module) => { import('@toast-ui/react-editor').then((module) => {
editorRef.current = module.Editor; editorRef.current = module.Editor;
setEditorLoaded(true); // 标记编辑器已加载
}).catch((error) => { }).catch((error) => {
console.error('Failed to load Toast UI Editor:', error); console.error('Failed to load Toast UI Editor:', error);
}); });
@ -58,7 +60,7 @@ export default function EditorSection({ initialContent, visible, onChange }: Edi
}, [initialContent, visible]); }, [initialContent, visible]);
// 在服务端或组件未加载完成时,使用 Viewer 模式显示内容 // 在服务端或组件未加载完成时,使用 Viewer 模式显示内容
if (!isClient || !editorRef.current || !visible) { if (!isClient || !editorLoaded || !visible) {
return ( return (
<div className="mt-8"> <div className="mt-8">
<EditorViewer content={currentContent || ''} /> <EditorViewer content={currentContent || ''} />

Loading…
Cancel
Save