ckeditor5 中的 ckfinder 反应 js 不起作用

问题描述

我通过从 ckeditor 站点复制代码来使用 ckeditor react 组件，当将“ckfinder”添加到工具栏时，它会返回以下错误：

未捕获的类型错误：无法读取未定义的属性 'modal'

这里是我的代码：

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. npm install --save @ckeditor/ckeditor5-react @ckeditor/ckeditor5-build-decoupled-document（如果你安装了它，请删除它并重新安装）
2. 将您的代码粘贴到组件中。
3. 将 src="https://ckeditor.com/apps/ckfinder/3.4.5/ckfinder.js" 添加到您的页面或根文件中 - 将其包装脚本标签！
4. npm 启动