ckeditor5 中的 ckfinder 反應 js 不工作

Question

我通過從 ckeditor 站點復制代碼使用 ckeditor React 組件，當將“ckfinder”添加到工具欄時，它返回以下錯誤：

未捕獲的類型錯誤：無法讀取未定義的屬性“模態”

這是我的代碼：

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

從您發布的代碼中，不能說明太多。 但是，基於不同的線程，問題似乎來自過時的包。

以下是您可以遵循的一些步驟，看看它是否能解決問題。

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 開始