Quill Image Pro

The most comprehensive image management toolkit for Quill editor with responsive resizing, smart alignment, text wrapping, and advanced image tools.

Features

• ✨ Improved Scroll Handling - Toolbar and dropdowns stay properly positioned during editor and document scrolling
• 🖼️ Responsive Image Resizing with smart resize handles that adapt to image alignment
• 🔄 Image Alignment (left, center, right) with intuitive visual feedback
• 📝 Text Wrapping around images (left or right) for better content flow
• 🎨 Border Customization (width, color) with live preview
• 🔗 Image Actions (copy, link, alt text, delete) for complete image management
• ⚙️ Highly Customizable - Configure which controls appear in the toolbar to match your needs
• 🌐 i18n Support - Easy localization for all UI elements

Why Choose Quill Image Pro?

Quill Image Pro elevates your rich text editing experience with its intuitive image management capabilities. Whether you're building a blog platform, CMS, or any content creation tool, this plugin delivers professional image handling that your users will love.

Key Advantages

• Smart Resize Handles: Handles intelligently adapt to image alignment states
• Aspect Ratio Preservation: Maintains image proportions during resizing
• Framework Agnostic: Works seamlessly with React, Angular, Vue, and vanilla JS
• Mobile-Friendly: Responsive design works across all device sizes
• Accessibility: ARIA compliant with keyboard navigation support
• Extensive Documentation: Comprehensive examples for all frameworks

Installation

With npm:

1npm install @lokesh-stack/quill-image-pro

With yarn:

1yarn add @lokesh-stack/quill-image-pro

With pnpm:

1pnpm add @lokesh-stack/quill-image-pro

Usage Examples

React

1import { useRef, useEffect } from 'react';
2import ReactQuill from 'react-quill';
3import Quill from 'quill';
4import 'react-quill/dist/quill.snow.css';
5import '@lokesh-stack/quill-image-pro/dist/quill-resize-image.min.css';
6import QuillResizeImage from '@lokesh-stack/quill-image-pro';
7
8// Register the module
9Quill.register('modules/resize', QuillResizeImage);
10
11function QuillEditor() {
12  const quillRef = useRef(null);
13  
14  const modules = {
15    toolbar: [
16      [{ 'header': [1, 2, 3, 4, 5, 6, false] }],
17      ['bold', 'italic', 'underline', 'strike'],
18      [{ 'list': 'ordered'}, { 'list': 'bullet' }],
19      ['image', 'link'],
20    ],
21    resize: {
22      // You can provide custom locale strings
23      locale: {
24        altTip: 'Alt text',
25        floatLeft: 'Float left',
26        floatRight: 'Float right',
27        center: 'Center',
28        left: 'Left',
29        right: 'Right',
30      },
31      // Configure which buttons to show in the toolbar
32      toolbar: {
33        border: true,          // Show border controls
34        align: true,           // Show alignment buttons
35        wrap: true,            // Show text wrapping buttons
36        imageActions: {
37          copy: true,          // Show copy button
38          link: true,          // Show add link button
39          altText: true,       // Show alt text button
40          delete: true         // Show delete button
41        }
42      }
43    }
44  };
45
46  return (
47    <div className="editor-container">
48      <ReactQuill
49        ref={quillRef}
50        theme="snow"
51        modules={modules}
52        placeholder="Write something..."
53      />
54    </div>
55  );
56}
57
58export default QuillEditor;

Angular

1// app.module.ts
2import { NgModule } from '@angular/core';
3import { BrowserModule } from '@angular/platform-browser';
4import { QuillModule } from 'ngx-quill';
5import { AppComponent } from './app.component';
6
7// Import the CSS files
8import 'quill/dist/quill.snow.css';
9import '@lokesh-stack/quill-image-pro/dist/quill-resize-image.min.css';
10
11@NgModule({
12  declarations: [AppComponent],
13  imports: [
14    BrowserModule,
15    QuillModule.forRoot()
16  ],
17  providers: [],
18  bootstrap: [AppComponent]
19})
20export class AppModule { }

1// app.component.ts
2import { Component, OnInit } from '@angular/core';
3import Quill from 'quill';
4import QuillResizeImage from '@lokesh-stack/quill-image-pro';
5
6// Register the resize module
7Quill.register('modules/resize', QuillResizeImage);
8
9@Component({
10  selector: 'app-root',
11  template: `
12    <quill-editor
13      [styles]="{height: '300px'}"
14      [modules]="quillModules"
15      placeholder="Write your content here..."
16    ></quill-editor>
17  `
18})
19export class AppComponent implements OnInit {
20  quillModules = {};
21
22  ngOnInit() {
23    this.quillModules = {
24      toolbar: [
25        ['bold', 'italic', 'underline', 'strike'],
26        [{ 'list': 'ordered'}, { 'list': 'bullet' }],
27        ['image', 'link']
28      ],
29      resize: {
30        locale: {
31          altTip: 'Alt text',
32          floatLeft: 'Float left',
33          floatRight: 'Float right',
34          center: 'Center',
35          left: 'Left',
36          right: 'Right',
37        },
38        toolbar: {
39          border: true,
40          align: true,
41          wrap: true,
42          imageActions: {
43            copy: true,
44            link: true,
45            altText: true,
46            delete: true
47          }
48        }
49      }
50    };
51  }
52}

Vanilla JavaScript

1<!DOCTYPE html>
2<html lang="en">
3<head>
4  <meta charset="UTF-8">
5  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6  <title>Advanced Quill Image Resize Example</title>
7  
8  <!-- Include Quill stylesheet -->
9  <link href="https://cdn.quilljs.com/1.3.6/quill.snow.css" rel="stylesheet">
10  
11  <!-- Include the image resize plugin CSS -->
12  <link href="path/to/@lokesh-stack/quill-image-pro/dist/quill-resize-image.min.css" rel="stylesheet">
13</head>
14<body>
15  <div id="editor">
16    <p>Hello World!</p>
17    <p>Add an image and resize it with our advanced controls!</p>
18  </div>
19
20  <!-- Include Quill library -->
21  <script src="https://cdn.quilljs.com/1.3.6/quill.min.js"></script>
22  
23  <!-- Include the image resize plugin -->
24  <script src="path/to/@lokesh-stack/quill-image-pro/dist/quill-resize-image.min.js"></script>
25  
26  <script>
27    // Register the module with Quill
28    Quill.register('modules/resize', QuillResizeImage);
29
30    // Initialize Quill editor
31    const quill = new Quill('#editor', {
32      theme: 'snow',
33      modules: {
34        toolbar: [
35          ['bold', 'italic', 'underline', 'strike'],
36          [{ 'color': [] }, { 'background': [] }],
37          [{ 'list': 'ordered' }, { 'list': 'bullet' }],
38          ['image', 'link']
39        ],
40        resize: {
41          // Custom locale strings
42          locale: {
43            altTip: 'Alternative Text',
44            floatLeft: 'Wrap with text (left)',
45            floatRight: 'Wrap with text (right)',
46            center: 'Center align',
47            left: 'Left align',
48            right: 'Right align'
49          },
50          // Configure toolbar options
51          toolbar: {
52            border: true,        // Show border controls
53            align: true,         // Show alignment buttons
54            wrap: true,          // Show text wrapping buttons
55            imageActions: {
56              copy: true,        // Show copy button
57              link: true,        // Show add link button
58              altText: true,     // Show alt text button
59              delete: true       // Show delete button
60            }
61          },
62          // Optional callback when image is changed
63          onChange: function(image) {
64            console.log('Image changed:', image);
65          }
66        }
67      },
68      placeholder: 'Compose an epic story...'
69    });
70  </script>
71</body>
72</html>

Configuration Options

Resize Module Options

Option	Type	Description
locale	Object	Customize the text strings used in the UI
toolbar	Object	Configure which buttons appear in the toolbar
toolbar.border	Boolean	Show/hide border controls
toolbar.align	Boolean	Show/hide alignment buttons
toolbar.wrap	Boolean	Show/hide text wrapping buttons
toolbar.imageActions	Object	Configure image action buttons
toolbar.imageActions.copy	Boolean	Show/hide copy button
toolbar.imageActions.link	Boolean	Show/hide link button
toolbar.imageActions.altText	Boolean	Show/hide alt text button
toolbar.imageActions.delete	Boolean	Show/hide delete button
onChange	Function	Callback when image is changed

Browser Support

The plugin is tested and works in all modern browsers (Chrome, Firefox, Safari, Edge).