[FIXED] How to configure the upload adapter in CKEditor 5 with ReactJS?

Issue

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?

Solution

In order to make it work you should add only:

config={{ckfinder: {
    // Upload the images to the server using the CKFinder QuickUpload command
    // You have to change this address to your server that has the ckfinder php connector
    uploadUrl: 'https://example.com/ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Images&responseType=json'
}}}

Adding this part of code will stop showing up the upload adapter error. This won't upload pictures until you set up the server side. You can follow these instructions to install the php connector: https://ckeditor.com/docs/ckfinder/ckfinder3-php/quickstart.html

The full 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}
                    config={{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'
                    }}}
                    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;

Answered By - devamat

Answer Checked By - David Goodson (PHPFixing Volunteer)