React 17 CKEditor Example – Integrate CKEditor In React

1. Install the CKEditor 5 React component

The first step is to install the CKEditor 5 React component. To do this, open a terminal window and run the following command:

npm install –save @ckeditor/ckeditor5-react

2. Create a React component

Next, create a React component that will be used to render the CKEditor 5 editor. This component should include the following code:

import React, { Component } from ‘react’;
import CKEditor from ‘@ckeditor/ckeditor5-react’;
import ClassicEditor from ‘@ckeditor/ckeditor5-build-classic’;

class CKEditorExample extends Component {
render() {
return (

Integrate CKEditor in react js example; In this tutorial, you will learn how to implement CKEditor with forms in react js apps.

CKEditor 5 provides every type of WYSIWYG editing solution imaginable. From editors similar to Google Docs and Medium, to Slack or Twitter like applications, all is possible within a single editing framework.

Builds are ready-to-use solutions to common editing needs. Every build can be customized to include a completely custom set of features. Features are flexible. You can write a custom feature once, and reuse it everywhere!

If you want to integrate ckeditor in react js app. So this tutorial will create a simple form and implement ckeditor with the help of the react-ckeditor and bootstrap 4 libraries. Now in this react ckeditor intergration example tutorial will provide you step by step guide on how to integrate CKEditor in react js app with the bootstrap 4 library.

How to Install and Use CKEditor in React App

Follow the following steps to install and use CKEditor in react js app:

• Step 1 – Create React App
• Step 2 – Install CKEditor and Bootstrap 4
• Step 3 – Create CKEditor Component
• Step 4 – Add CKEditorComponent in App.js

Step 1 – Create React App

In this step, open your terminal and execute the following command on your terminal to create a new react app:

npx create-react-app my-react-app

To run the React app, execute the following command on your terminal:

npm start

Check out your React app on this URL: localhost:3000

Step 2 – Install CKEditor and Bootstrap 4

In this step, execute the following command to install CKEditor and bootstrap 4 library into your react app:

npm install react-ckeditor-component

npm install bootstrap --save

Add bootstrap.min.css file in src/App.js file:

import React, { Component } from 'react'

import '../node_modules/bootstrap/dist/css/bootstrap.min.css';

function App() {
  return (
    <div>
      <h2>How to Use CKEditor in React</h2>
    </div>
  );
}

export default App;

Step 3 – Create CKEditor Component

In this step, create CkEditorExampleComponent.js file. So, visit the src directory of your react js app and create a ckeditor component file named CkEditorExampleComponent.js. And add the following code into it:

import React from 'react'
import CKEditor from "react-ckeditor-component";

class CkEditorExampleComponent extends React.Component{

    constructor(props) {
        super(props);
        
        this.state = {
            content: 'content',
        }

        this.updateContent = this.updateContent.bind(this);
        this.onChange = this.onChange.bind(this);
    }
 
    updateContent(newContent) {
        this.setState({
            content: newContent
        })
    }
    
    onChange(evt){
      var newContent = evt.editor.getData();
      this.setState({
        content: newContent
      })
      console.log("onChange fired with event info: ", newContent);
    }
    
    onBlur(evt){
      console.log("onBlur event called with event info: ", evt);
    }
    
    afterPaste(evt){
      console.log("afterPaste event called with event info: ", evt);
    }

    render(){
        return(
            <div>
                <CKEditor 
                activeClass="p10" 
                content={this.state.content} 
                events={{
                    "blur": this.onBlur,
                    "afterPaste": this.afterPaste,
                    "change": this.onChange
                }}
                />
            </div>
        )
    }
    
}

export default CkEditorExampleComponent;

Step 4 – Add CKEditorComponent in App.js

In this step, you need to add CkEditorExampleComponent.js file in src/App.js file:

import React from 'react';

import '../node_modules/bootstrap/dist/css/bootstrap.min.css';

import CkEditorExampleComponent from './CkEditorExampleComponent'

function App() {  
    
  return (  
    <div className="App">  
      <CkEditorExampleComponent />  
    </div>  
  );  
}  

export default App;

Conclusion

Integrate CKEditor in react js example; In this tutorial, you have learn how to implement CKEditor with forms in react js apps.

Recommended React JS Posts