Build A Wysiwyg Text Editor Using Quill

Getting Started with Quill Installation

Quill offers multiple installation approaches to accommodate different project configurations. The simplest method involves including Quill directly from a CDN, while npm installation provides better dependency management for modern applications.

CDN Setup

The simplest method involves including Quill directly from a CDN:

<!-- Include Quill stylesheet -->
<link href="https://cdn.quilljs.com/1.3.6/quill.snow.css" rel="stylesheet">

<!-- Include Quill library -->
<script src="https://cdn.quilljs.com/1.3.6/quill.js"></script>

npm Installation

For modern applications built with React or Next.js:

npm install quill

React Integration

npm install react-quill

For React apps, you can use react-quill or integrate Quill directly using hooks for more control over the editor lifecycle.

Configuring the Toolbar

The toolbar configuration gives you precise control over which formatting options appear in the editor, enabling you to create a tailored writing experience for your users.

Basic Configuration

var toolbarOptions = [
 ['bold', 'italic', 'underline', 'strike'],
 ['blockquote', 'code-block'],
 [{ 'header': 1 }, { 'header': 2 }],
 [{ 'list': 'ordered'}, { 'list': 'bullet' }],
 [{ 'script': 'sub'}, { 'script': 'super' }],
 [{ 'indent': '-1'}, { 'indent': '+1' }],
 [{ 'size': ['small', false, 'large', 'huge'] }],
 [{ 'header': [1, 2, 3, 4, 5, 6, false] }],
 [{ 'color': [] }, { 'background': [] }],
 [{ 'font': [] }],
 [{ 'align': [] }],
 ['clean']
];

var quill = new Quill('#editor', {
 modules: { toolbar: toolbarOptions },
 theme: 'snow'
});

Custom Handlers

Add custom functionality to toolbar buttons for specialized content types:

quill.getModule('toolbar').addHandler('custom-button', function() {
 // Your custom logic here
 quill.insertText(0, 'Custom content inserted!', 'bold', true);
});

This flexibility makes Quill suitable for building custom web applications with unique content requirements.

Building a React Quill Component

React integration requires careful lifecycle management and state handling to ensure smooth operation within your application's component architecture.

Direct Integration with Hooks

import { useEffect, useRef, useState } from 'react';
import Quill from 'quill';
import 'quill/dist/quill.snow.css';

export default function RichTextEditor() {
 const editorRef = useRef(null);
 const [editorContent, setEditorContent] = useState('');

 useEffect(() => {
 if (!editorRef.current) return;

 const quill = new Quill(editorRef.current, {
 theme: 'snow',
 modules: {
 toolbar: [
 [{ 'header': [1, 2, false] }],
 ['bold', 'italic', 'underline'],
 ['image', 'code-block']
 ]
 }
 });

 quill.on('text-change', () => {
 setEditorContent(quill.root.innerHTML);
 });

 return () => {
 quill.off('text-change');
 };
 }, []);

 return (
 <div>
 <div ref={editorRef} style={{ height: '200px' }} />
 <div dangerouslySetInnerHTML={{ __html: editorContent }} />
 </div>
 );
}

Handling Editor Events

Quill fires several event types for comprehensive content management:

• text-change: When content changes
• selection-change: When cursor moves
• editor-change: Combines both events for unified handling

For enterprise applications, consider our React development services to implement robust rich text solutions.

Next.js Integration Considerations

Next.js requires special handling due to its hybrid rendering model that combines server-side and client-side rendering capabilities.

Dynamic Import Solution

// components/QuillEditor.jsx
'use client';

import dynamic from 'next/dynamic';
import 'quill/dist/quill.snow.css';

const QuillEditor = dynamic(
 () => import('./QuillEditorInner'),
 { 
 ssr: false,
 loading: () => <p>Loading editor...</p>
 }
);

export default QuillEditor;

Proper Cleanup

Always destroy the Quill instance on unmount to prevent memory leaks:

useEffect(() => {
 const quill = new Quill(editorRef.current, options);

 return () => {
 quill.destroy();
 };
}, []);

Handling Content

Three ways to access editor content for different use cases:

• HTML: quill.root.innerHTML - Best for display and storage
• Text: quill.getText() - Best for search and word counting
• Delta: quill.getContents() - Best for collaborative editing

Implementing proper content handling is essential for web application performance and user experience.

Advanced Customization and Extension

Quill supports extensive customization beyond basic configuration, enabling you to create truly unique editing experiences.

Custom Blots

Create custom document elements to extend Quill's capabilities:

const Blockquote = BlockEmbed.extend({
 create(value) {
 const node = super.create(value);
 node.setAttribute('cite', value);
 return node;
 }
});

BlotName = 'blockquote';
ClassName = 'custom-quote';

Custom Modules

Add custom functionality through the module system:

Quill.register('modules/custom-module', CustomModule);

const CustomModule = function(quill) {
 this.quill = quill;
 this.root = quill.root;
 
 // Initialize module
};

Theming

Customize the visual appearance to match your brand:

.ql-toolbar.ql-snow {
 background-color: #f8f9fa;
 border-radius: 8px 8px 0 0;
}

.ql-container.ql-snow {
 border-radius: 0 0 8px 8px;
 font-family: 'Inter', sans-serif;
}

These advanced capabilities make Quill ideal for custom software development requiring specialized content management features.