如何使用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 modules are duplicated.错误。您只能将没有任何导入的插件添加到CKEditor 5代码中。使用plugins配置的
2. 将覆盖默认的插件集。如果没有对CKEditor 5代码库的任何导入，则extraPlugins选项将起作用。

Answer 2

下面的包是用默认插件预先构建的。

import ClassicEditor from '@ckeditor/ckeditor5-build-classic';

为了根据您的需要添加或删除插件，您可以创建自定义构建。试试吧，here。