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;

 

Related Blogs

Objects Are Not Valid as a React Child

React objects are not valid as a react child

The React error "Objects are not valid as a React child" occurs when we render an object or an array in our JSX code. We can't use JavaScript objects as a child in React.

Can't Perform a React State Update on an Unmounted Component

Can't Perform a React State Update on an Unmounted Component

React Warning “Can't perform a react state update on an unmounted component” is caused when we try to update the state after the component was unmounted. Explains how to fix it.

Each child in a list should have a unique key prop

Each child in a list should have a unique key prop

Solve Warning: Each child in a list should have a unique ”key" prop in React by setting the id property as a unique key or by auto-assigning unique keys.

React Hook is Called Conditionally

React Hook is Called Conditionally

Error: "React Hook is called conditionally. React Hooks must be called in the exact same order in every component render" occurs when hooks are invoked conditionally or after a return of a value.

Too many re-renders. React limits the number of renders to prevent an infinite loop

Too many re-renders. React limits the number of renders to prevent an infinite loop

The React error "Too many re-renders. React limits the number of renders to prevent an infinite loop" happens when you have reached an infinite render loop.

Adjacent JSX elements must be wrapped in an enclosing tag

Adjacent JSX elements must be wrapped in an enclosing tag

The "Adjacent JSX elements must be wrapped in an enclosing tag" error can be solved by wrapping the multiple elements in a parent div or in a react fragment

The tag is unrecognized in this browser

Warning: The tag is unrecognized in this browser

Warning "The tag is unrecognized in this browser" occurs when the tag doesn't exist in the browser or when we render a component starting with a lowercase letter.

The style prop expects a mapping from style properties to values, not a string

The style prop expects a mapping from style properties to values, not a string

"The style prop expects a mapping from style properties to values, not a string" React error occurs when we pass a CSS string to the style attribute.

Import and export may only appear at the top level

Import and export may only appear at the top level

The error "import and export may only appear at the top level" may occur due to a missing closing brace when declaring a function or class. Explains with an example.