EDIT: I've opened an issue on Github: https://github.com/ckeditor/ckeditor5-editor-classic/issues/98

I've spent about 2 days trying to figure this out.

The editor works fine, but when I try to add an image there's an error:

filerepository-no-upload-adapter: Upload adapter is not defined. Read
more:
https://ckeditor.com/docs/ckeditor5/latest/framework/guides/support/error-codes.html#error-filerepository-no-upload-adapter

I browsed the documentation for hours, but I could not figure out a solution. You can see below the steps in the documentation I tried to follow.

This is my code:

import React, { Component } from 'react'; 

import CKEditor from '@ckeditor/ckeditor5-react';

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



console.log(ClassicEditor.builtinPlugins.map( plugin => plugin.pluginName ));



class EditorComponent extends Component {

    constructor(props) {



      super(props);



      this.state = {

        id: props.id,

        content: props.content,

        handleWYSIWYGInput: props.handleWYSIWYGInput,

        editor: ClassicEditor

      }



    } 



    render() {

        return (

            <div className=Editor-content>

                <CKEditor

                    editor={ this.state.editor }

                    data={this.state.content}

                    onInit={ editor => {

                        // You can store the editor and use when it is needed.

                        console.log( 'Editor is ready to use!', editor );

                    } }

                    onChange={ ( event, editor ) => {

                        const data = editor.getData();

                        //this.state.handleWYSIWYGInput(this.props.id, data);

                        console.log( { event, editor, data } );

                        console.log(this.state.content);

                    } }

                    onBlur={ editor => {

                        console.log( 'Blur.', editor );

                    } }

                    onFocus={ editor => {

                        console.log( 'Focus.', editor );

                    } }

                />

            </div>

        );

    }

}



export default EditorComponent;

If you open the link in the error it says:

If you see this warning when using one of the CKEditor 5 Builds it
means that you did not configure any of the upload adapters available
by default in those builds.

See the comprehensive Image upload overview to learn which upload
adapters are available in the builds and how to configure them.

Then you can follow this link: https://ckeditor.com/docs/ckeditor5/latest/features/image-upload/image-upload.html

Which will give you a few options to configure the upload adapter. I'd like to use CKFinder, hence: https://ckeditor.com/docs/ckeditor5/latest/features/image-upload/ckfinder.html

And then you read this:

This feature is enabled by default in all builds.

So I suppose the feature is present in all builds, but still needs to be configured. How do I do this in ReactJS?

I tried to implement the code linked in the page, but the syntax is not working in ReactJS and anyway adding import CKFinder from '@ckeditor/ckeditor5-ckfinder/src/ckfinder'; would generate another error:

ckeditor-duplicated-modules: Some CKEditor 5 modules are duplicated.
Read more:
https://ckeditor.com/docs/ckeditor5/latest/framework/guides/support/error-codes.html#error-ckeditor-duplicated-modules

The code in the documentation's page:

import CKFinder from '@ckeditor/ckeditor5-ckfinder/src/ckfinder';



ClassicEditor

    .create( document.querySelector( '#editor' ), {

        plugins: [ CKFinder, ... ],



        // Enable the Insert image button in the toolbar.

        toolbar: [ 'imageUpload', ... ],



        ckfinder: {

            // Upload the images to the server using the CKFinder QuickUpload command.

            uploadUrl: 'https://example.com/ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Images&responseType=json'

        }

    } )

    .then( ... )

    .catch( ... );

How can I make it work?