REACTJS - 从在线构建导入 CKEditor 5

Question

我在将 CUSTOM CKEditor 5 导入 ReactJS 时遇到了困难。我已经搜索了文档，但似乎很难理解。

首先，我转到此处的 Onine Builder：https : //ckeditor.com/ckeditor-5/online-builder/ 并下载 zip 文件。

然后，在这个 zip 文件中，我有构建文件夹（包含 ckeditor.js、ckeditor.js.map 和翻译文件夹）。将此文件夹中的所有内容复制到 /src/compoments/CKeditor （以在 React 中导入）。

然后像这样导入

import CKEditor from "@ckeditor/ckeditor5-react"; (install via npm)
import ClassicEditor from "./components/ckeditor/ckeditor"; (import from zip file)

我有这个错误。请让我知道如何在 ReactJS 中安装 CkEditor。

非常感谢。

在此处输入图片说明

Answer 1

您应该像这样将 zip 文件的内容添加到项目的根目录中：

??? ckeditor5
?   ??? build
?   ??? sample
?   ??? src
?   ??? ...
?   ??? package.json
?   ??? webpack.config.js
??? node_modules
??? public
??? src
??? ...
??? package.json

然后运行此命令yarn add file:./ckeditor5或npm add file:./ckeditor5. 现在您可以通过这种方式使用您的自定义编辑器：

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

const editorConfiguration = {
    toolbar: [ 'bold', 'italic' ]
};

class App extends Component {
    render() {
        return (
            <div className="App">
                <h2>Using CKEditor 5 from online builder in React</h2>
                <CKEditor
                    editor={ Editor }
                    config={ editorConfiguration }
                    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;