How to Use Rich Text Editor in React js
11 months ago
admin
Reactjs
In this lesson, we will see how to use rich text editor in React JS, let's assume that we have a component for adding articles and we want to add a rich text editor to make users store articles.
Install the package
First, let's install the package we need.
npm i react-quill
Display the rich text editor
Next, inside the component, we use the react quill component to display the rich text editor.
import React, { useState } from 'react'
import ReactQuill from 'react-quill'
import 'react-quill/dist/quill.snow.css'
export default function Write() {
const [article, setArticle] = useState({
title: '',
body: ''
})
const modules = {
toolbar: [
[{ 'header': [1, 2, false] }],
['bold', 'italic', 'underline','strike', 'blockquote'],
[{'list': 'ordered'}, {'list': 'bullet'}, {'indent': '-1'}, {'indent': '+1'}],
['link', 'image', 'code-block'],
['clean']
]
}
const storeArticle = async (e) => {
e.preventDefault()
console.log(article)
}
return (
<div className='container'>
<div className="row my-5">
<div className="col-md-6 mx-auto">
<div className="card shadow-sm">
<div className="card-header bg-white">
<h5 className="text-center mt-2">
Add new article
</h5>
</div>
<div className="card-body">
<form className="mt-5" onSubmit={(e) => storeArticle(e)}>
<div className="mb-3">
<label htmlFor="title"
className='form-label'>Title*</label>
<input type="text" name="title" id="title"
className='form-control'
onChange={(e) => setArticle({
...article, title: e.target.value
})}
/>
</div>
<div className="mb-3">
<label htmlFor="body"
className='form-label'>Body*</label>
<ReactQuill theme="snow"
modules={modules}
value={article.body}
onChange={(data) => setArticle({
...article, body: data
})}
/>
</div>
<div className="mb-3">
<button type="submit"
className='btn btn-sm btn-dark'>
Submit
</button>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
)
}