1

Quill RichText Editor

Don Strawsburg edited this page 2025-12-15 22:29:31 -05:00

Table of Contents

• ✅ What You can Do with React Quill
• 1. Basic Rich-Text Editing
• 🔧 2. Customizable Toolbars
• 🖼️ 3. Image Support
• ✔ Paste an image
• 📁 4. File Uploads
• 🧱 5. Custom Blots (Custom Elements)
• 📄 6. Controlled / Uncontrolled Mode
• ✔ A Controlled Component
• ✔ Uncontrolled Component
• 🔌 7. Keyboard Shortcuts
• 🌐 8. Themes: Snow, Bubble, Custom
• 🧩 9. Extensions & Plugins
• 📤 10. Convert to/from HTML, Delta, JSON
• ✔ HTML
• ✔ Quill Delta format
• 🧼 11. Sanitization & Whitelisting
• 🔐 12. Read-Only Mode
• 🎯 Best Use Cases for React Quill
• 🆚 When NOT to Use React Quill
• If You Want, I Can Provide:

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

React Quill is one of the most flexible and widely used rich-text editors for React. It wraps the Quill.js editor and allows you to customize almost every part of the editing experience.

Below is a complete breakdown of what you can do with React Quill, from basic formatting to deep customization.

---

✅ What You can Do with React Quill

1. Basic Rich-Text Editing

React Quill supports all standard formatting out of the box:

• Bold / Italic / Underline / Strike
• Headings (H1–H6)
• Block quotes
• Ordered / Unordered lists
• Links
• Code blocks
• Inline code
• Text alignment (left, center, right, justify)
• Text color / background color

You enable/disable these via the toolbar module.

---

🔧 2. Customizable Toolbars

You can fully customize the toolbar:

const modules = {
  toolbar: [
    [{ header: [1, 2, 3, false] }],
    ['bold', 'italic', 'underline'],
    [{ list: 'ordered'}, { list: 'bullet' }],
    ['link', 'image'],
    ['clean']
  ]
};

You can even build your own toolbar UI and bind it to Quill.

---

🖼️ 3. Image Support

React Quill can support:

✔ Paste an image

✔ Drag & drop ✔ Upload to your server or S3 ✔ Convert to Base64 ✔ Add captions or resize (using plugins)

To override the default image handler:

const modules = {
  toolbar: {
    container: "#toolbar",
    handlers: {
      image: () => {
        // custom upload dialog or S3 upload
      }
    }
  }
};

---

📁 4. File Uploads

You can customize Quill to embed:

• PDFs
• Videos
• Audio
• Custom widgets

Each embed is defined via a Quill Blot.

---

🧱 5. Custom Blots (Custom Elements)

Quill lets you build your own elements inside the editor.

Examples of custom blots you can create:

• “Callout boxes”
• “Warning blocks”
• “YouTube embed”
• “Tweet embed”
• “Custom components” like buttons or forms (rendered as HTML placeholders)

class MyBlot extends BlockEmbed { … }
Quill.register(MyBlot);

This is one of Quill’s strongest features.

---

📄 6. Controlled / Uncontrolled Mode

React Quill can work as:

✔ A Controlled Component

You manage the HTML/state yourself.

const [value, setValue] = useState("");

<ReactQuill value={value} onChange={setValue} />

✔ Uncontrolled Component

The editor manages itself.

---

🔌 7. Keyboard Shortcuts

Quill includes a full shortcut system that you can edit.

Examples:

• Ctrl + B → bold
• Ctrl + H → heading
• Create your own shortcuts via the keyboard module.

---

🌐 8. Themes: Snow, Bubble, Custom

React Quill ships with:

• Snow theme (full toolbar)
• Bubble theme (inline pop-up formatting)

You can also write a fully custom theme using CSS.

---

🧩 9. Extensions & Plugins

There are many community plugins:

• Quill Image Resize
• Quill Image Drop
• Quill Better Table
• Quill Mentions (@mention support)
• Markdown shortcut support

You can integrate these easily:

import QuillImageResize from "quill-image-resize-module";
Quill.register("modules/imageResize", QuillImageResize);

---

📤 10. Convert to/from HTML, Delta, JSON

React Quill supports:

✔ HTML

✔ Quill Delta format

✔ JSON representation

You can:

• Save as HTML
• Save as Delta (recommended for storing structured data)
• Load HTML back into the editor

---

🧼 11. Sanitization & Whitelisting

By default Quill sanitizes input, preventing:

• XSS injection
• Bad HTML
• Inline scripts

You can customize what HTML tags and attributes are allowed.

---

🔐 12. Read-Only Mode

You can render the content without editing:

<ReactQuill value={content} readOnly={true} theme="bubble" />

This is useful for blog posts, emails, dashboards.

---

🎯 Best Use Cases for React Quill

• CMS editors (blog, product descriptions)
• Email editors
• Comment boxes
• Form rich-text fields
• Internal tools
• Chat apps with formatting
• Knowledge base systems

---

🆚 When NOT to Use React Quill

React Quill may not be ideal if you need:

• Real-time collaboration (use TipTap + Yjs)
• Complete Markdown-native editing (use Editor.js or TipTap)
• Super lightweight editor (Quill is ~100kb+)

---

If You Want, I Can Provide:

✅ Code example with image upload ✅ A full custom toolbar ✅ A fully customized editor (colors, fonts, mentions) ✅ A version that stores Delta in your database ✅ Recommendations vs Tiptap / Editor.js

Just tell me what you want to build!