0

i use ckeditor react component by copy code from ckeditor site and when add 'ckfinder' to toolbars it return error below:

Uncaught TypeError: Cannot read property 'modal' of undefined

here my code:

import React, { Component } from 'react';
import { CKEditor } from '@ckeditor/ckeditor5-react';
import ClassicEditor from '@ckeditor/ckeditor5-build-classic';

class App extends Component {
    render() {
        return (
            <div className="App">
                <h2>Using CKEditor 5 build in React</h2>
                <CKEditor
                    editor={ ClassicEditor }
                    config={ {
                        toolbar: [ 'bold', 'italic' , 'ckfinder' ]
                    } }
                    data="<p>Hello from CKEditor 5!</p>"
                    onReady={ 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();
                        console.log( { event, editor, data } );
                    } }
                    onBlur={ ( event, editor ) => {
                        console.log( 'Blur.', editor );
                    } }
                    onFocus={ ( event, editor ) => {
                        console.log( 'Focus.', editor );
                    } }
                />
            </div>
        );
    }
}

export default App;

1 Answer 1

1

From the code that you have posted, not much can be stated. However, based on different threads it seems like the problem comes from outdated packages.

Here are some steps you can follow and see if it fixes the problem.

  1. npm install --save @ckeditor/ckeditor5-react @ckeditor/ckeditor5-build-decoupled-document ( if you have it installed remove it and install it again)
  2. Paste your code to the component.
  3. Add src="https://ckeditor.com/apps/ckfinder/3.4.5/ckfinder.js" to your page or in the root file - wrap it script tags!
  4. npm start
Sign up to request clarification or add additional context in comments.

2 Comments

ok this solved but how can change ckfinder browse url it alwayse go to https://ckeditor.com/apps/ckfinder/3.4.5/core/connector/php/connector.php?command=GetFiles&lang=en&type=Images&currentFolder=%2F&hash=f635e3acdc080f11 when open ckfinder
Please update the question and provide the code for the current issue.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.