Adding Quill JS : Rich Text Editor to a React (Next.js) Application

In modern web applications, providing a rich text editing experience for users is often a necessity. The Quill Rich Text Editor is a powerful and customizable solution for implementing rich text editing features in your web projects. In this tutorial, we will guide you through the process of seamlessly integrating the Quill Rich Text Editor into a React application built with Next.js.

Whether you're developing a content management system, a blogging platform, or any application that requires users to create and edit richly formatted text, Quill can elevate the user experience to the next level. With its intuitive interface and a plethora of features such as text formatting, lists, image embedding, and more, Quill simplifies the process of implementing a versatile text editor.

In this tutorial, we assume you have some basic familiarity with React and Next.js. We'll start by setting up a Next.js project and then proceed to install and configure Quill. You'll learn how to create a rich text editor component and integrate it directly into your Next.js application. We'll also cover styling, testing, and customization to tailor the editor to your specific project requirements.

By the end of this tutorial, you'll have the skills to enhance your web applications with a feature-rich and user-friendly Quill Rich Text Editor, allowing your users to create and edit content with ease.

Let's get started!

Wait ! ! !

If you are a beginner then Quill is a nice option. But it can only performs basic operations like Bold, Italic, Underlines, Image upload only with base64 conversion etc. etc.

It doesn't have any table creation, source code editing, subscript, supersript options. If you are looking for those options then Quill might be not a good option for you.

If you need all options refer to 

https://www.soubhagyajit.com/blogs/how-to-add-jodit-editor-in-a-react-app-next-js

Prerequisites:

- Node.js and npm or yarn installed on your machine.

- Basic knowledge of React and Next.js.

Step 1: Setting Up a Next.js Project:

npx create-next-app my-quill-editor-app
cd my-quill-editor-app

Step 2: Installing Quill and React Quill:

npm install quill react-quill
# or
yarn add quill react-quill

Step 3: Creating the Quill Editor Component (pages/index.js):

import React, { useState } from 'react';
import dynamic from 'next/dynamic';
import 'react-quill/dist/quill.snow.css'; // Import Quill styles


const QuillEditor = dynamic(() => import('react-quill'), { ssr: false });


export default function Home() {
  const [content, setContent] = useState('');


  const quillModules = {
    toolbar: [
      [{ header: [1, 2, 3, false] }],
      ['bold', 'italic', 'underline', 'strike', 'blockquote'],
      [{ list: 'ordered' }, { list: 'bullet' }],
      ['link', 'image'],
      [{ align: [] }],
      [{ color: [] }],
      ['code-block'],
      ['clean'],
    ],
  };


  const quillFormats = [
    'header',
    'bold',
    'italic',
    'underline',
    'strike',
    'blockquote',
    'list',
    'bullet',
    'link',
    'image',
    'align',
    'color',
    'code-block',
  ];


  const handleEditorChange = (newContent) => {
    setContent(newContent);
  };


  return (
    <main>
      <div className="h-screen w-screen flex items-center flex-col">
        <div className="m-10  flex flex-col items-center">
         <span className="text-2xl text-center">
          
        Quill Rich Text Editor
        </span> 
        <div className='text-center'>Author : Soubhagyajit Borah</div>
        <div className='text-center'>visit <a href="https://www.sjbtechcenter.online/" target='_blank' className="text-blue-500">www.sjbtechcenter.online</a> for more information</div>
        </div>
        <div className="h-full w-[90vw]">
          <QuillEditor
            value={content}
            onChange={handleEditorChange}
            modules={quillModules}
            formats={quillFormats}
            className="w-full h-[70%] mt-10 bg-white"
          />
        </div>
      </div>
    </main>
  );
}

Note: We are using Tailwind CSS in this tutorial.

Step 4: Styling the Editor:

- Apply custom CSS styles to customize the appearance of the Quill editor and toolbar.

Step 5: Testing the Application:

- Run the Next.js application to test the Quill rich text editor functionality by typing below command in terminal :

npm run dev

or

yarn dev

Step 6: Customization and Advanced Features:

In this section, we'll explore how to take your Quill Rich Text Editor to the next level by customizing its appearance and adding advanced features.

1.Customizing the Quill Editor's Appearance:

One of the great strengths of Quill is its flexibility in terms of customization. You can easily tweak the editor's appearance to match your project's design. To change the editor's styles, you can utilize custom CSS. Here's an example of how to apply custom styles to the editor:

// Define custom styles
const quillStyles = {
 '.ql-editor': {
      fontFamily: 'Arial, sans-serif',
      fontSize: '16px',
      color: '#333',
      },
  // Add more custom styles as needed
   };
        
// Apply custom styles to the editor
quillInstance.root.style.cssText = quillStyles['.ql-editor'];

By modifying the `quillStyles` object, you can change various aspects of the editor's appearance, including font, size, and color.

2.Adding Custom Modules and Functionality:

Quill's modular architecture allows you to add custom modules to enhance its functionality. Let's say you want to add a custom toolbar button that performs a specific action. Here's how you can do it:

// Example: 
//Adding a custom toolbar button

const customButton = document.querySelector('.custom-button');
        customButton.addEventListener('click', () => 
{

// Implement your custom logic when the button is clicked
alert('Custom button clicked!');

});

In this example, we've added an event listener to a custom button with the class `custom-button`. When the button is clicked, you can execute any custom logic you need, such as inserting a template or performing an action relevant to your application.

These are just a few ways you can customize and extend the Quill editor to suit your project's requirements. The possibilities are nearly endless, and Quill's documentation is a valuable resource for diving deeper into customization and adding advanced features.

In the next sections, we'll cover more advanced topics, including image uploads, third-party plugin integration, and handling complex formatting and features. Stay tuned to unlock even more potential with Quill!

Step 7: Deployment and Production Build:

Now take your Next.js application with the Quill editor to production. Deploy it effortlessly on Vercel using GitHub for a scalable and reliable live environment.

Additional Resources:

Github Repository : https://github.com/soubhagyajit/quill

Try Quill Js on the web : https://quill-js-on-the-web.soubhagyajit.com/

Conclusion:

Congratulations, you've successfully integrated the Quill Rich Text Editor into your React application built with Next.js! By following these steps, you've empowered your web application with a feature-rich and user-friendly text editor that allows users to create and edit content effortlessly.

But don't stop here! Quill offers a wealth of customization options and possibilities. To further enhance your Quill editor and tailor it to your project's unique requirements, we encourage you to explore Quill's official documentation. There, you'll find in-depth guides, examples, and reference materials to help you make the most of this powerful tool.

Thank you for joining us on this journey to enhance the user experience in your web applications. We look forward to seeing the amazing content you and your users create with Quill!

Happy coding!