How to paste image into CKEditor5 in React using Base64UploadAdapter

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

You should build the editor from source and load the plugin using the plugins configuration. You can check out the guide for create-react-app 2 that shows what needs to be installed and how the webpack should be configured.

The way you did won't work because of two things:

1. Building source code and built code together is forbidden and throws the Some CKEditor 5 modules are duplicated. error. You can only add a plugin that doesn't have any imports to the CKEditor 5 code.
2. Using the plugins configuration overrides the default set of plugins. The extraPlugins option would work if it wouldn't have any imports to CKEditor 5 codebase.