How to Use Rich Text Editor in React js
9 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>
)
}