REACTJS - Import CKEditor 5 from online build

user_12073199 0
Viewed 3645

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

reactjs ckeditor javascript
3 Answers

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;
user_87403870

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 git+git@github.com:<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>
);
}
user_140340750

Add eslint disabled at the top, like this

/* eslint-disabled */

your code of ckeditor.js inside build/ckeditor.js

/* eslint-enabled */

user_76576460
Related