A modern, secure module for the Quill rich text editor that allows you to resize images, videos, and iframes with comprehensive security updates and enhanced features.
- 🖼️ Image Resizing - Resize images with drag handles
- 🎥 Video Resizing - Resize videos maintaining aspect ratio
- 📱 Responsive Design - Works on all devices
- 🌐 Multi-language Support - Customizable locale options
- 🔒 Security First - Zero vulnerabilities, modern dependencies
- ⚡ Performance Optimized - Lightweight and fast
- 🎨 Customizable Toolbar - Show/hide alignment and size tools
- 📏 Size Display - Optional size indicator
Live Demo: https://botoom.github.io/quill-resize-module/
npm install @botom/quill-resize-moduleimport Quill from "quill";
import ResizeModule from "@botom/quill-resize-module";
Quill.register("modules/resize", ResizeModule);
const quill = new Quill("#editor", {
modules: {
resize: {
showSize: true,
locale: {
altTip: "Hold down the alt key to zoom",
floatLeft: "Left",
floatRight: "Right",
center: "Center",
restore: "Restore",
},
},
},
});<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Quill Resize Module Demo</title>
<link href="https://cdn.jsdelivr.net/npm/quill@2.0.0/dist/quill.snow.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/quill@2.0.0/dist/quill.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@botom/quill-resize-module@latest/dist/quill-resize-module.js"></script>
</head>
<body>
<div id="editor"></div>
<script>
Quill.register("modules/resize", window.QuillResizeModule);
const quill = new Quill("#editor", {
modules: {
toolbar: ["bold", "italic", "image", "video"],
resize: {
showSize: true,
locale: {}
}
},
theme: "snow"
});
</script>
</body>
</html>| Option | Type | Default | Description |
|---|---|---|---|
showToolbar |
boolean | true |
Show/hide the toolbar |
showSize |
boolean | false |
Display current dimensions |
locale |
object | {} |
Custom language strings |
toolbar.sizeTools |
boolean | true |
Show size adjustment tools |
toolbar.alingTools |
boolean | true |
Show alignment tools |
const quill = new Quill("#editor", {
modules: {
resize: {
locale: {
altTip: "Hold down the alt key to zoom",
floatLeft: "Left",
floatRight: "Right",
center: "Center",
restore: "Restore",
},
},
},
});// Hide alignment tools (for newer Quill versions)
const quill = new Quill("#editor", {
modules: {
resize: {
toolbar: {
alingTools: false, // Hide alignment
sizeTools: true, // Keep size tools
},
},
},
});For the latest versions of Quill that don't support the style attribute:
const quill = new Quill("#editor", {
modules: {
resize: {
toolbar: {
alingTools: false, // Disable alignment tools
},
showSize: true,
},
},
});- ✅ Fixed positioning when nested inside relative elements (PR #12)
- ✅ Security vulnerabilities resolved (DOM Clobbering XSS, RCE)
- ✅ Dependencies updated to latest secure versions
- ✅ Build system modernized with Rollup v3
- 🔒 0 vulnerabilities (npm audit)
- 🛡️ Modern dependencies (no deprecated packages)
- ✅ CI/CD security with Node.js 20.x
| Browser | Version |
|---|---|
| Chrome | 70+ |
| Firefox | 65+ |
| Safari | 12+ |
| Edge | 79+ |
- Fork the repository
- Create your feature branch (
git checkout -b feature/amazing-feature) - Commit your changes (
git commit -m 'feat: add amazing feature') - Push to the branch (
git push origin feature/amazing-feature) - Open a Pull Request
This project follows Conventional Commits for automated versioning:
feat:for new featuresfix:for bug fixesdocs:for documentationstyle:for formattingrefactor:for code refactoringtest:for testschore:for maintenance
# Clone the repository
git clone https://github.com/BOTOOM/quill-resize-module.git
cd quill-resize-module
# Install dependencies
npm install
# Start development
npm run dev
# Run tests
npm test
# Build for production
npm run buildMIT © Edwar Diaz
- Quill.js - Modern rich text editor
- Quill Image Resize - Alternative image resize module
