ckeditor5 中的 ckfinder 反应 js 不工作

Question

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;

Answer 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