首页 > 解决方案 > CKEditor5 React 内存使用情况

问题描述

我在反应项目中使用 CKEditor5。每次用户打开编辑器页面时,浏览器的内存使用量都会增加。我把editor.destroy()清理状态。但它似乎对内存使用没有影响,因为问题还在继续。

它以大约 300 mb 的内存使用量开始,然后在打开和关闭具有编辑器内容的数十个不同页面后,它会上升到 2000 mb 或更多。

可能是什么原因?

// ... other packages
import { CKEditor } from '@ckeditor/ckeditor5-react';
import Editor from 'ckeditor5-custom-build/build/ckeditor';

function EditorPage(props) {
    const { editorContent } = useSelector(({ publisher }) => publisher.board);
    const [edited, setEdited] = useState(false);
    const [content, setContent] = useState('');
    const [editor, setEditor] = useState(undefined);

    useEffect(() => {
        function handleSetContent() {
            const mContent = editorContent.type === 'q' ? editorContent.question.name : editorContent.option.desc;
            setContent(mContent);
        }
        if (editor && editorContent) handleSetContent();
        return () => {
            if (editor) {
                editor.destroy()
            }
        };
    }, [dispatch, editor, editorContent]);

    //** cleaned remaining code here//

    return (
        <div className="flex flex-1 flex-auto flex-col w-full h-full relative">

            <CKEditor
                editor={Editor}
                config={editorConfiguration}
                data={content}
                onReady={editor => {
                    // You can store the "editor" and use when it is needed.
                    setEditor(editor);
                }}
                onChange={(event, editor) => {
                    const data = editor.getData();
                    setContent(data);
                    setEdited(true);
                    //console.log({ event, editor, data });
                }}
                onBlur={(event, editor) => {
                    //console.log('Blur.', editor);
                }}
                onFocus={(event, editor) => {
                    //console.log('Focus.', editor);
                }}
            />
        </div>
    );
}

export default EditorPage;

标签: javascriptreactjsckeditorckeditor5

解决方案


推荐阅读