javascript - 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。

非常感谢。

enter image description here

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;