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
- Go to ckeditor online builder.
- Select an editor type we prefer(eg: classic editor, inline editor, balloon, balloon block, and decoupled document).
- Select the plugins(features in the toolbar) we want in our custom editor.
- Pick from available toolbar items. Then, drag and change the orders of items as per our requirements.
- Choose the default language for the editor.
- Click ‘Start’ to build the ckeditor5 and download it.
How to integrate custom build ckeditor5 with React
- Run the below command to install ckeditor5-react npm package.
npm install --save @ckeditor/ckeditor5-react
- Create a folder named ckeditor at the root of the react project.
- Put our custom build CKEditor files in this folder.
- Next, add the custom build CKEditor into our node_modules. For this run the below command
npm add file:./ckeditor
- 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;
On datainfinities.com, Read articles all around JavaScript, React, Node.js, PHP, Laravel, and Shopify.
Related Blogs
Invalid DOM property `for`. Did you mean `htmlFor`
useHref() may be used only in the context of a Router component
Can't Perform a React State Update on an Unmounted Component
export 'withRouter' (imported as 'withRouter') was not found in 'react-router'
Only one default export allowed per module
Get the current route using React Router
How to fix npm ERR! Missing script: "start"
Pass data from child to parent component in React
Explore All Blogs