【问题标题】:ckfinder in ckeditor5 react js not workingckeditor5中的ckfinder反应js不起作用
【发布时间】:2021-09-04 09:12:24
【问题描述】:

我通过从 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;

【问题讨论】:

    标签: reactjs ckeditor5 ckfinder


    【解决方案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 开始

    【讨论】:

    • 好的,这解决了,但是如何更改 ckfinder 浏览 url 当打开 ckfinder 时它总是转到 https://ckeditor.com/apps/ckfinder/3.4.5/core/connector/php/connector.php?command=GetFiles&amp;lang=en&amp;type=Images&amp;currentFolder=%2F&amp;hash=f635e3acdc080f11
    • 请更新问题并提供当前问题的代码。
    猜你喜欢
    • 2021-06-13
    • 2019-01-29
    • 1970-01-01
    • 2020-08-28
    • 1970-01-01
    • 2022-01-06
    • 2021-12-30
    • 2018-04-01
    • 2021-06-27
    相关资源
    最近更新 更多