reactjs - 如何使用 Base64UploadAdapter 将图像粘贴到 React 中的 CKEditor5 中

Question

根据 React 和 CKEditor5 图像上传选项:

https://ckeditor.com/docs/ckeditor5/latest/features/image-upload/image-upload.html

以下代码确实正确渲染了 CKEditor 组件:

import CKEditor from '@ckeditor/ckeditor5-react';
import ClassicEditor from '@ckeditor/ckeditor5-build-classic';
import Base64UploadAdapter from '@ckeditor/ckeditor5-upload/src/base64uploadadapter';

...

<CKEditor
    editor={ ClassicEditor }
    data=  { value }        
    onInit={ editor => {
        console.log( { event, editor, editor.getData()} );
    } }
    onChange={ ( event, editor ) => {
        const data = editor.getData();
        onChange(data);
    } }
    onBlur={ editor => {
        console.log( 'Blur.', editor );
    } }
    onFocus={ editor => {
        console.log( 'Focus.', editor );
    } }
/>

我的理解是 @ckeditor/ckeditor5-build-classic 实现了上传适配器，并且应该允许按照演示页面将图像粘贴到编辑器中:https://ckeditor.com/docs/ckeditor5/latest/features/image-upload/base64-upload-adapter.html

但是在CKEditor中添加config={ { plugins: [ Base64UploadAdapter] } }后，数据既无法加载，也无法粘贴图片。

使用ckeditor5-react和base64uploader的正确方法是什么？我也尝试过导入

import ClassicEditor from '@ckeditor/ckeditor5-editor-classic/src/classiceditor';

而不是 ckeditor-build-classic，但该组件根本不渲染。

Answer 1

您应该从源代码构建编辑器并使用 plugins 配置加载插件。您可以查看guide for create-react-app 2它显示了需要安装的内容以及应如何配置 webpack。

由于以下两件事，你的方法不起作用:

1. 禁止同时构建源代码和构建代码，并会引发Some CKEditor 5 module is duplicated.错误。您只能添加没有任何导入 CKEditor 5 代码的插件。
2. 使用plugins配置会覆盖默认的插件集。如果 extraPlugins 选项没有任何对 CKEditor 5 代码库的导入，则该选项将起作用。