REACTJS - Import CKEditor 5 from online build

Question

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.

enter image description here

Answer 1

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;

Answer 2

There are two scenarios where you need to change your custom build time to time. In that case, either you can keep on publishing on npm after running

npm run build

on your custom build or you can keep that in your github and install using

npm install [email protected]:<your username>/<custom ckeditor>.git

You can rename the name so that whenever you install it goes into

node_modules/@ckeditor/ckeditor5-custom-build

{
  "name": "@ckeditor/ckeditor5-custom-build",
   ....
}

Now you need to import like this

import { Editor } from '@ckeditor/ckeditor5-custom-build';

And thus all your code would look like this

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

export const  CkEditor =  () => {
  return (
    <div className="App">
        <h2>Using CKEditor 5 build in React</h2>
        <CKEditor
            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( {"data": data } );
            } }
            onBlur={ ( event, editor ) => {
                console.log( 'Blur.', editor );
            } }
            onFocus={ ( event, editor ) => {
                console.log( 'Focus.', editor );
            } }
        />
    </div>
);
}