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

允许将图像粘贴到编辑器中

但是将config={ { plugins: [ Base64UploadAdapter] } }添加到CKEditor之后，数据既不会加载，也无法粘贴图像。

使用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。

由于以下两点，您的工作方式无效：

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

Answer 2

以下软件包是使用默认插件预先构建的。

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

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

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

2 个答案: