如何使用 Base64UploadAdapter 在 React 中将图像粘贴到 CKEditor5

Question

As per React & CKEditor5 Image upload options:

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

The following code does render the CKEditor component correctly:

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 );
    } }
/>

My understanding was that @ckeditor/ckeditor5-build-classic implements the upload adapter and should allow pasting of images into the editor as per the demo page: https://ckeditor.com/docs/ckeditor5/latest/features/image-upload/base64-upload-adapter.html

But after adding config={ { plugins: [ Base64UploadAdapter] } } to CKEditor, the data neither loads nor can images be pasted.

What is the proper way to use ckeditor5-react and the base64uploader? I have also tried importing

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

instead of the ckeditor-build-classic, but the componenent does not render at all, then.

Answer 1

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

你的方法行不通，原因有两点：

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