Create a RichText editor using Quilljs

Quilljs is a Javascript editor for enriching the web applications. The toolkit was used by companies like, LinkedIn, Slab etc.

How to use Quill in React

For React we can use community libraries such as react-quilljs. Let’s setup a React project and install the dependencies.

npx create-react-app myapp
yarn add react-quilljs quill

We can use the the useQuill hook implement the toolkit as follows.

import React from 'react';
import { useQuill } from "react-quilljs";
  
 

export default function Editor() {
    const { quill, quillRef } = useQuill();
  return (
    <div style={{ width: 1000, height: 300 }}>
      <div ref={quillRef} />
     
    </div>
  )
}

The styling (CSS) may not work properly, for that import the CSS class provided by Quill.

 import "quill/dist/quill.snow.css";  

A live version of the project can be found at sandbox , in case required.

Links

React-Quills

• Quill without toolbar
• Quilljs mention snippet
• Create Quill RichText editor using react-quill
• How to get HTML from Remirror editor in Reactjs
• How to get state as JSON from Remirror editor in Reactjs
• How to get content from Quilljs in React
• Create a TinyMCE Rich Text Editor in React
• Create a Slate Rich Text Editor in React
• Create a Material-UI Rich Text Editor in React
• Create a RichText editor using Quilljs