React 17 CKEditor Example – Integrate CKEditor In React

React 17 CKEditor Example – Integrate CKEditor In React

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

AuthorAdmin

Greetings, I'm Devendra Dode, a full-stack developer, entrepreneur, and the proud owner of Tutsmake.com. My passion lies in crafting informative tutorials and offering valuable tips to assist fellow developers on their coding journey. Within my content, I cover a spectrum of technologies, including PHP, Python, JavaScript, jQuery, Laravel, Livewire, CodeIgniter, Node.js, Express.js, Vue.js, Angular.js, React.js, MySQL, MongoDB, REST APIs, Windows, XAMPP, Linux, Ubuntu, Amazon AWS, Composer, SEO, WordPress, SSL, and Bootstrap. Whether you're starting out or looking for advanced examples, I provide step-by-step guides and practical demonstrations to make your learning experience seamless. Let's explore the diverse realms of coding together.

Leave a Reply

Your email address will not be published. Required fields are marked *