6

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?

devamat
  • 2,293
  • 6
  • 27
  • 50
  • 2
    I'm going through the same stress right now... I cannot, for the life of me, understand why folks can't just lay out the documentation in a straightforward way. Why is every new project like this? It's absolutely incredible... never changes! Give plenty of examples and make common sense functionality like file uploads easy! – Gary Jun 28 '21 at 00:07

2 Answers2

5

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;
devamat
  • 2,293
  • 6
  • 27
  • 50
  • What does this return? uploadUrl: 'https://example.com/ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Images&responseType=json' – Gary Jun 28 '21 at 00:17
  • is there a way to store image in client, until form submits ? – Wings Sep 20 '22 at 09:43
  • This answer saved my life, thank you so much. A little additional caveat, in your backend (where you handle uploading the image), make sure to do res.status(200).json({ uploaded: true, url: [path to upload urll] }); uploaded:true is crucial--I was having some odd issues until I figured out that I needed to add that. – God's Drunkest Driver Aug 21 '23 at 22:43
0

I think you are confused about how to configure the ckeditor setting in React. Mostly people are like me at the start but to do configuration in the ckeditor for react component you have to follow it like this. I take config as an object which take another object inside that's how we add and remove plugins.

Here's an example in the documentation of CKeditor 5. https://ckeditor.com/docs/ckeditor5/latest/builds/guides/integration/frameworks/react.html#using-ckeditor-5-source

<CKEditor
    data="<p>Editor' content</p>"
    config={ {
        plugins: [ CKFinder, ... ],
        toolbar: [ 'imageUpload', ... ],
        ckfinder: {
            uploadUrl: 'https://example.com/ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Images&responseType=json'
        }
    } }
/>
Community
  • 1
  • 1
  • So how do I configure the upload adapter? Can you provide an example to solve the issue? – devamat Aug 10 '19 at 03:45
  • You have to add plugin into that like as an example in the documentation. How to add plugins and for remove plugins use the save key word the documentation using. –  Aug 10 '19 at 03:46
  • But the documentations says that official builds already have the plugin included. I'd rather not make my own build since the official classic editor build has all I need. If I add the plugin to an existing build it gives another error (duplicate modules) as shown in my post. – devamat Aug 10 '19 at 03:48
  • Yes, image upload is included in all the available builds. In order to make it work, though, you need to configure one of the existing upload adapters or write your own. In short, upload adapter is a simple class which role is to send a file to a server (in whatever way it wants) and resolve the returned promise once it's done. –  Aug 10 '19 at 03:53
  • @devamat I have found something relevant hope this will answer your query. https://stackoverflow.com/questions/46765197/how-to-enable-image-upload-support-in-ckeditor-5?noredirect=1&lq=1 –  Aug 10 '19 at 03:55
  • I would like to configure one of the existing upload adapters: how do you do that? If I try to import it with import CKFinder from '@ckeditor/ckeditor5-ckfinder/src/ckfinder'; it will give an error of duplicated-modules. – devamat Aug 10 '19 at 03:56
  • I already followed that link but I could not figure out a way to make it work. I think I red all the threads on SO available for this topic. – devamat Aug 10 '19 at 03:57
  • I guess I have to use this: ckfinder: { uploadUrl: '/ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Files&responseType=json' } but where do I add this part of the code? I know that I also have to set up the server side to make it work. – devamat Aug 10 '19 at 03:59
  • Ok I think I figured it out. Thank you for your help. Check my answer. – devamat Aug 10 '19 at 04:02
  • I have update the answer you can do it like that above sample code. @devamat –  Aug 10 '19 at 04:05
  • Thank you. Unfortunately your answer won't work with any of the official builds because in order to make it work you need to import the ckfinder plugin, which will cause a duplicate-module error. It can work only with a custom build. – devamat Aug 10 '19 at 04:11
  • how to add a header? – Shahrukh Mohammad Jan 18 '20 at 06:45