REACTJS - Import CKEditor 5 from online build

I got stuck at import the CUSTOM CKEditor 5 to ReactJS. I had already searching the docs but it seems to hard to understand.

First, I go to the Onine Builder in here: https://ckeditor.com/ckeditor-5/online-builder/ and download the zip file.

Then, in this zip file, I have the build folder (contains ckeditor.js, ckeditor.js.map and the translation folder). Copy all the contents in this folder to /src/compoments/CKeditor (to import in React).

And import it like this

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

And I have this error. Please let me know how to install CkEditor in ReactJS.

Many thanks.

You should add the content of the zip file to the root of your project like this:

├── ckeditor5
│   ├── build
│   ├── sample
│   ├── src
│   ├── ...
│   ├── package.json
│   └── webpack.config.js
├── node_modules
├── public
├── src
├── ...
└── package.json

Then run this command yarn add file:./ckeditor5 or npm add file:./ckeditor5. Now you can use your custom Editor in this way:

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;