Gathering detailed insights and metrics for quill-image-resize-module-plus
Gathering detailed insights and metrics for quill-image-resize-module-plus
Gathering detailed insights and metrics for quill-image-resize-module-plus
Gathering detailed insights and metrics for quill-image-resize-module-plus
npm install quill-image-resize-module-plus
Typescript
Module System
Node Version
NPM Version
JavaScript (94.07%)
HTML (5.93%)
Total Downloads
0
Last Day
0
Last Week
0
Last Month
0
Last Year
0
MIT License
6 Commits
1 Watchers
1 Branches
1 Contributors
Updated on Jan 13, 2021
Latest Version
1.0.2
Package Id
quill-image-resize-module-plus@1.0.2
Unpacked Size
233.73 kB
Size
85.23 kB
File Count
17
NPM Version
6.4.1
Node Version
10.15.3
Cumulative downloads
Total Downloads
Last Day
0%
NaN
Compared to previous day
Last Week
0%
NaN
Compared to previous week
Last Month
0%
NaN
Compared to previous month
Last Year
0%
NaN
Compared to previous year
A module for Quill rich text editor to allow images to be resized.
Also see quill-image-drop-module, a module that enables copy-paste and drag/drop for Quill.
1import Quill from 'quill'; 2import ImageResize from 'quill-image-resize-module-plus'; 3 4Quill.register('modules/imageResize', ImageResize); 5 6const quill = new Quill(editor, { 7 // ... 8 modules: { 9 // ... 10 imageResize: { 11 // See optional "config" below 12 } 13 } 14});
Copy image-resize.min.js into your web root or include from node_modules
1<script src="/node_modules/quill-image-resize-module-plus/image-resize.min.js"></script>
1Quill.register('modules/imageResize', window.ImageResize.default); 2var quill = new Quill(editor, { 3 // ... 4 modules: { 5 // ... 6 imageResize: { 7 // See optional "config" below 8 } 9 } 10});
For the default experience, pass an empty object, like so:
1var quill = new Quill(editor, { 2 // ... 3 modules: { 4 // ... 5 imageResize: {} 6 } 7});
Functionality is broken down into modules, which can be mixed and matched as you like. For example, the default is to include all modules:
1const quill = new Quill(editor, { 2 // ... 3 modules: { 4 // ... 5 imageResize: { 6 modules: [ 'Resize', 'DisplaySize', 'Toolbar' ] 7 } 8 } 9});
Each module is described below.
Resize
- Resize the imageAdds handles to the image's corners which can be dragged with the mouse to resize the image.
The look and feel can be controlled with options:
1var quill = new Quill(editor, { 2 // ... 3 modules: { 4 // ... 5 imageResize: { 6 // ... 7 handleStyles: { 8 backgroundColor: 'black', 9 border: 'none', 10 color: white 11 // other camelCase styles for size display 12 } 13 } 14 } 15});
DisplaySize
- Display pixel sizeShows the size of the image in pixels near the bottom right of the image.
The look and feel can be controlled with options:
1var quill = new Quill(editor, { 2 // ... 3 modules: { 4 // ... 5 imageResize: { 6 // ... 7 displayStyles: { 8 backgroundColor: 'black', 9 border: 'none', 10 color: white 11 // other camelCase styles for size display 12 } 13 } 14 } 15});
Toolbar
- Image alignment toolsDisplays a toolbar below the image, where the user can select an alignment for the image.
The look and feel can be controlled with options:
1var quill = new Quill(editor, { 2 // ... 3 modules: { 4 // ... 5 imageResize: { 6 // ... 7 toolbarStyles: { 8 backgroundColor: 'black', 9 border: 'none', 10 color: white 11 // other camelCase styles for size display 12 }, 13 toolbarButtonStyles: { 14 // ... 15 }, 16 toolbarButtonSvgStyles: { 17 // ... 18 }, 19 } 20 } 21});
BaseModule
- Include your own custom moduleYou can write your own module by extending the BaseModule
class, and then including it in
the module setup.
For example,
1import { Resize, BaseModule } from 'quill-image-resize-module'; 2 3class MyModule extends BaseModule { 4 // See src/modules/BaseModule.js for documentation on the various lifecycle callbacks 5} 6 7var quill = new Quill(editor, { 8 // ... 9 modules: { 10 // ... 11 imageResize: { 12 modules: [ MyModule, Resize ], 13 // ... 14 } 15 } 16});
No vulnerabilities found.
Reason
license file detected
Details
Reason
binaries present in source code
Details
Reason
Found 0/6 approved changesets -- score normalized to 0
Reason
0 commit(s) and 0 issue activity found in the last 90 days -- score normalized to 0
Reason
no effort to earn an OpenSSF best practices badge detected
Reason
security policy file not detected
Details
Reason
branch protection not enabled on development/release branches
Details
Reason
no SAST tool detected
Details
Reason
project is not fuzzed
Details
Reason
135 existing vulnerabilities detected
Details
Score
Last Scanned on 2025-07-07
The Open Source Security Foundation is a cross-industry collaboration to improve the security of open source software (OSS). The Scorecard provides security health metrics for open source projects.
Learn More