quill-react-pro

A Professional-Grade Quill Rich Text Editor for React

This project is a fork and enhancement of the original quill-react-commercial library by ludejun, aiming to provide a robust, customizable, and production-ready Quill rich text editor component for React applications. It leverages the power of Quill with a focus on improved user experience, modern development practices, and extended features.

(Note: Image from original repository. Links will be updated as the project evolves.)

Features

• Latest Quill Version: Built upon quill@2.0.2.
• React Hooks & TypeScript: Modern implementation using React Hooks with TypeScript support.
• Efficient Bundling: Packaged with Rollup for optimized builds.
• Enhanced Image Handling:
  • Support for local image uploads and URL insertion
  • Pre-upload checks for image format and size
  • Base64 image display with background remote uploads
  • Failed upload retry functionality
  • Image insertion via copy/paste and drag-and-drop
  • Image resizing, alignment, captioning, and deletion
• Improved Link Handling: Enhanced link tooltip with extended actions
• Markdown Support: Direct Markdown input conversion to rich text
• Advanced Code Blocks:
  • Language selection for syntax highlighting
  • Copy-to-clipboard functionality
  • Code line numbering
• Enhanced Tables:
  • Toolbar for table size selection
  • Context menu for table operations
  • Modern table editing icons
• Multilingual Support: Tooltips and UI text in English, Spanish, and Chinese
• Improved IME Handling: Better support for Input Method Editors
• Auto-linking: Automatic URL detection and linking
• Various Bug Fixes: Solutions for issues from the original implementation

Installation

1npm install quill-react-pro --save

Quick Start

1import React from "react";
2import RichTextEditor from "quill-react-pro";
3import "quill-react-pro/lib/style.css"; // Import the styles
4
5function MyEditor() {
6  // Basic modules configuration
7  const modules = {
8    table: {}, // Enable table module with default options
9    codeHighlight: true, // Enable code highlighting
10    // Add other modules as needed
11  };
12
13  return (
14    <RichTextEditor modules={modules} placeholder="Start typing here..." />
15  );
16}
17
18export default MyEditor;

UMD / CDN Usage: The component is available as window.QuillReactPro in UMD builds.

1<script src="path/to/your/quill-react-pro.min.js"></script>
2<link rel="stylesheet" href="path/to/your/quill-react-pro.css" />

API Reference

Props

Prop	Type	Required	Default	Description
modules	object	Yes	-	Configuration for Quill modules
placeholder	string	No	-	Placeholder text when editor is empty
getQuill	function	No	-	Callback to access Quill instance
content	Delta|string	No	-	Initial content (Delta or HTML)
readOnly	boolean	No	false	Makes editor read-only
onChange	function	No	-	Change event handler
onFocus	function	No	-	Focus event handler
onBlur	function	No	-	Blur event handler
onSave	function	No	-	Save action handler
i18n	'en'|'zh'|'es'	No	'en'	UI language
style	CSSProperties	No	{}	Custom container styles
theme	'snow'|'bubble'	No	'snow'	Quill theme

Modules Configuration

1const modules = {
2  // Table module
3  table: {
4    operationMenu: {
5      // Optional: Customize context menu
6      insertColumnRight: { text: "Insert Column Right" },
7      // Other operations...
8    },
9    backgroundColors: {
10      colors: ["#4a90e2", "#999", "#ffffff", "#000000"],
11      text: "Background Colors",
12    },
13    toolBarOptions: {
14      dialogRows: 3, // Default: 9
15      dialogColumns: 4, // Default: 9
16      i18n: "en", // Dialog language
17    },
18  },
19
20  // Code highlighting
21  codeHighlight: true, // Or array of custom languages
22
23  // Image module
24  imageHandler: {
25    imgUploadApi: async (formData) => {
26      // Upload implementation
27      return "https://example.com/image.jpg"; // Must return image URL
28    },
29    uploadSuccCB: (responseData) => {
30      /* Success callback */
31    },
32    uploadFailCB: (error) => {
33      /* Error callback */
34    },
35    imgRemarkPre: "Fig. ", // Caption prefix
36    maxSize: 2, // Max image size in MB (Default: 5MB)
37    imageAccept: "image/png, image/gif, image/jpeg, image/bmp, image/webp",
38  },
39
40  // Other modules
41  imageResize: true, // Enable image resizing
42  imageDrop: true, // Enable image drop/paste
43  magicUrl: true, // Auto-detect URLs
44  markdown: true, // Enable Markdown conversion
45  link: true, // Enable link functionality
46
47  // Toolbar customization
48  toolbarOptions: [
49    /* Custom toolbar configuration */
50  ],
51};

Full Example

1import React, { useRef } from "react";
2import RichTextEditor from "quill-react-pro";
3import "quill-react-pro/lib/style.css";
4
5function Editor() {
6  const quillRef = useRef(null);
7
8  const getQuill = (quillInstance) => {
9    quillRef.current = quillInstance;
10  };
11
12  const handleChange = (delta, oldDelta) => {
13    console.log("Editor content changed:", delta);
14  };
15
16  const handleSave = () => {
17    console.log("Save requested (Ctrl+S)");
18    // Implement save functionality
19  };
20
21  const modules = {
22    table: {},
23    codeHighlight: true,
24    imageHandler: {
25      imgUploadApi: async (formData) => {
26        // In a real app, replace with actual upload implementation
27        console.log("Uploading image...");
28        return "https://example.com/image.jpg";
29      },
30      uploadFailCB: (error) => {
31        console.error("Image upload failed:", error);
32      },
33    },
34  };
35
36  return (
37    <RichTextEditor
38      modules={modules}
39      getQuill={getQuill}
40      onChange={handleChange}
41      onSave={handleSave}
42      i18n="en"
43      placeholder="Start writing..."
44    />
45  );
46}
47
48export default Editor;

Customizing Code Highlighting

The editor uses highlight.js for syntax highlighting. You can switch themes:

1// Import your preferred highlight.js theme
2import "highlight.js/styles/darcula.css";

Or via CDN:

1<link
2  rel="stylesheet"
3  href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/10.7.2/styles/atom-one-dark.min.css"
4/>

Development & Contributing

Contributions to quill-react-pro are welcome!

Local Development Setup:

1. Clone this repository: git clone https://github.com/marianochavez/quill-react-pro.git
2. Install dependencies: npm install
3. Build the library: npm run build
4. Run the example: npm run example

This will build the library and serve an example page for testing.

License

This project is licensed under the ISC License, the same license as the original quill-react-commercial project.

Original Copyright: Copyright (c) 2017-2025, Lu Dejun. All rights reserved.

Modifications Copyright: Modifications copyright (c) 2024-Present, Mariano Chavez (amarianochavez@gmail.com).

See the LICENSE file for full details.