javascript - How to configure the upload adapter in CKEditor 5 with ReactJS? - Stack Overflow

admin管理员组

文章数量:1344554

EDIT: I've opened an issue on Github:

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: .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 prehensive "Image upload overview" to learn which upload adapters are available in the builds and how to configure them.

Then you can follow this link: .html

Which will give you a few options to configure the upload adapter. I'd like to use CKFinder, hence: .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: .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 mand.
            uploadUrl: '.php?mand=QuickUpload&type=Images&responseType=json'
        }
    } )
    .then( ... )
    .catch( ... );

How can I make it work?

EDIT: I've opened an issue on Github: https://github./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./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 prehensive "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./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./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./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 mand.
            uploadUrl: 'https://example./ckfinder/core/connector/php/connector.php?mand=QuickUpload&type=Images&responseType=json'
        }
    } )
    .then( ... )
    .catch( ... );

How can I make it work?

• javascript
• reactjs
• image
• ckeditor

Share Improve this question Follow edited Aug 10, 2019 at 3:31 devamat asked Aug 9, 2019 at 13:01 devamatdevamat 2,51388 gold badges3333 silver badges5757 bronze badges 1

• 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 mon sense functionality like file uploads easy! – Gary Commented Jun 28, 2021 at 0:07

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 5

In order to make it work you should add only:

config={{ckfinder: {
    // Upload the images to the server using the CKFinder QuickUpload mand
    // You have to change this address to your server that has the ckfinder php connector
    uploadUrl: 'https://example./ckfinder/core/connector/php/connector.php?mand=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./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 mand.
                      uploadUrl: 'https://example./ckfinder/core/connector/php/connector.php?mand=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;

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 ponent 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./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./ckfinder/core/connector/php/connector.php?mand=QuickUpload&type=Images&responseType=json'
        }
    } }
/>

本文标签： javascriptHow to configure the upload adapter in CKEditor 5 with ReactJSStack Overflow