How to Integrate Custom Build CKEditor5 with React

CKEditor 5 is a modern JavaScript rich text editor with a well-designed UI, so users can easily manage media, tables, auto-formatting, mentions, Paste from Word or Markdown support, and more advanced features.

In this article we going to learn:

• How to create custom build ckeditor5.
• How to integrate it with React.

How to create custom build ckeditor5

1. Go to ckeditor online builder.
2. Select an editor type we prefer(eg: classic editor, inline editor, balloon, balloon block, and decoupled document).
3. Select the plugins(features in the toolbar) we want in our custom editor.
4. Pick from available toolbar items. Then, drag and change the orders of items as per our requirements.
5. Choose the default language for the editor.
6. Click ‘Start’ to build the ckeditor5 and download it.

How to integrate custom build ckeditor5 with React

1. Run the below command to install ckeditor5-react npm package.
   npm install --save @ckeditor/ckeditor5-react
2. Create a folder named ckeditor at the root of the react project.
3. Put our custom build CKEditor files in this folder.
4. Next, add the custom build CKEditor into our node_modules. For this run the below command
   npm add file:./ckeditor
5. Then import and configure the CKEditor in react component as given below:

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

const App = () => { 
       return (
           <div className="App">
               <h2>Using CKEditor 5 build in React</h2>
               <CKEditor
                   editor={ Editor }
                   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;