React JS CKEditor Example

react-ckeditor-component package allows users to add CKEditor in react applications, In this tutorial, you will learn how to integrate CKEditor in react js forms.

How to Install and Use CKEditor in React JS

Steps to install and use CKEditor in react js app:

Step 1 – Create React App

Run the following command on your cmd to create a new react app:

npx create-react-app my-react-app

To run the React app by using the following command:

npm start

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

Step 2 – Install and Set Up CKEditor

Run the following command to install CKEditor and bootstrap library into your react app:

npm install react-ckeditor-component

npm install bootstrap --save

Import 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

Create CkEditorExampleComponent.js file in src directory, and use CKEditor in a component to implement 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 – Import 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

In this tutorial, you have learned how to implement CKEditor with forms in react js apps.

Recommended React JS Posts