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.

$3

- 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:

``bash
npm install @lokesh-stack/quill-image-pro
`

With yarn:

`bash
yarn add @lokesh-stack/quill-image-pro
`

With pnpm:

`bash
pnpm add @lokesh-stack/quill-image-pro
`

Usage Examples

$3

`jsx
import { useRef, useEffect } from 'react';
import ReactQuill from 'react-quill';
import Quill from 'quill';
import 'react-quill/dist/quill.snow.css';
import '@lokesh-stack/quill-image-pro/dist/quill-resize-image.min.css';
import QuillResizeImage from '@lokesh-stack/quill-image-pro';

// Register the module
Quill.register('modules/resize', QuillResizeImage);

function QuillEditor() {
const quillRef = useRef(null);

const modules = {
toolbar: [
[{ 'header': [1, 2, 3, 4, 5, 6, false] }],
['bold', 'italic', 'underline', 'strike'],
[{ 'list': 'ordered'}, { 'list': 'bullet' }],
['image', 'link'],
],
resize: {
// You can provide custom locale strings
locale: {
altTip: 'Alt text',
floatLeft: 'Float left',
floatRight: 'Float right',
center: 'Center',
left: 'Left',
right: 'Right',
},
// Configure which buttons to show in the toolbar
toolbar: {
border: true, // Show border controls
align: true, // Show alignment buttons
wrap: true, // Show text wrapping buttons
imageActions: {
copy: true, // Show copy button
link: true, // Show add link button
altText: true, // Show alt text button
delete: true // Show delete button
}
}
}
};

return (


export default QuillEditor;
`

$3

`typescript
// app.module.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { QuillModule } from 'ngx-quill';
import { AppComponent } from './app.component';

// Import the CSS files
import 'quill/dist/quill.snow.css';
import '@lokesh-stack/quill-image-pro/dist/quill-resize-image.min.css';

@NgModule({
declarations: [AppComponent],
imports: [
BrowserModule,
QuillModule.forRoot()
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
`

`typescript
// app.component.ts
import { Component, OnInit } from '@angular/core';
import Quill from 'quill';
import QuillResizeImage from '@lokesh-stack/quill-image-pro';

// Register the resize module
Quill.register('modules/resize', QuillResizeImage);

@Component({
selector: 'app-root',
template:
[styles]="{height: '300px'}"
[modules]="quillModules"
placeholder="Write your content here..."
>

})
export class AppComponent implements OnInit {
quillModules = {};

ngOnInit() {
this.quillModules = {
toolbar: [
['bold', 'italic', 'underline', 'strike'],
[{ 'list': 'ordered'}, { 'list': 'bullet' }],
['image', 'link']
],
resize: {
locale: {
altTip: 'Alt text',
floatLeft: 'Float left',
floatRight: 'Float right',
center: 'Center',
left: 'Left',
right: 'Right',
},
toolbar: {
border: true,
align: true,
wrap: true,
imageActions: {
copy: true,
link: true,
altText: true,
delete: true
}
}
}
};
}
}
`

$3

`html

























`

Configuration Options

$3

| 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).