Gathering detailed insights and metrics for @winterlood/quill-image-resize-module-react
Gathering detailed insights and metrics for @winterlood/quill-image-resize-module-react
Installations
npm install @winterlood/quill-image-resize-module-reactDeveloper Guide
BETA
Typescript
No
Module System
CommonJS
Node Version
15.1.0
NPM Version
7.5.3
Releases
Unable to fetch releases
Languages
1
JavaScript
JavaScript (100%)
Developer
winterlood
Download Statistics
Total Downloads
0
Last Day
0
Last Week
0
Last Month
0
Last Year
0
GitHub Statistics
54 Commits
1 Branches
1 Contributors
Updated on Aug 31, 2021
Maintainers
1
Package Meta Information
Latest Version
3.1.6
Package Id
@winterlood/quill-image-resize-module-react@3.1.6
Unpacked Size
144.43 kB
Size
31.57 kB
File Count
21
NPM Version
7.5.3
Node Version
15.1.0
Total Downloads
Cumulative downloads
Total Downloads
NaN
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
Weekly Downloads
Monthly Downloads
Yearly Downloads
Dev Dependencies
18
Quill ImageResize Module
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.
Demo
Usage
Webpack/ES6
1import Quill from 'quill' 2import { ImageResize } from 'quill-image-resize-module' 3 4Quill.register('modules/imageResize', ImageResize) 5 6const quill = new Quill(editor, { 7 // ... 8 modules: { 9 // ... 10 imageResize: { 11 parchment: Quill.import('parchment') 12 // See optional "config" below 13 } 14 } 15})
Script Tag
Copy image-resize.min.js into your web root or include from node_modules
1<script src="/node_modules/quill-image-resize-module/image-resize.min.js"></script>
1var quill = new Quill(editor, { 2 // ... 3 modules: { 4 // ... 5 ImageResize: { 6 // See optional "config" below 7 } 8 } 9})
Config
For the default experience, pass an object with parchment, like so:
1var quill = new Quill(editor, { 2 // ... 3 modules: { 4 // ... 5 ImageResize: { 6 parchment: Quill.import('parchment') 7 } 8 } 9})
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 image
Adds 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 size
Shows 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 tools
Displays 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 module
You 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.
No security vulnerabilities found.