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.