Folders and files

Name		Name	Last commit message	Last commit date
Latest commit History 34 Commits
demo		demo
src		src
.editorconfig		.editorconfig
.eslintrc		.eslintrc
.gitignore		.gitignore
CHANGELOG.md		CHANGELOG.md
LICENSE		LICENSE
README.md		README.md
image-resize.min.js		image-resize.min.js
npm-shrinkwrap.json		npm-shrinkwrap.json
package.json		package.json
webpack.config.js		webpack.config.js

Repository files navigation

Quill ImageResize Module

A module for Quill rich text editor to allow images to be resized.

Also seequill-image-drop-module,a module that enables copy-paste and drag/drop for Quill.

Demo

Plunker

Usage

Webpack/ES6

importQuillfrom'quill';import{ImageResize}from'quill-image-resize-module';Quill.register('modules/imageResize',ImageResize);constquill=newQuill(editor,{// ...modules:{// ...imageResize:{// See optional "config" below}}});

Script Tag

Copy image-resize.min.js into your web root or include from node_modules

<scriptsrc="/node_modules/quill-image-resize-module/image-resize.min.js"></script>

varquill=newQuill(editor,{// ...modules:{// ...ImageResize:{// See optional "config" below}}});

Config

For the default experience, pass an empty object, like so:

varquill=newQuill(editor,{// ...modules:{// ...ImageResize:{}}});

Functionality is broken down into modules, which can be mixed and matched as you like. For example,the default is to include all modules:

constquill=newQuill(editor,{// ...modules:{// ...ImageResize:{modules:['Resize','DisplaySize','Toolbar']}}});

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:

varquill=newQuill(editor,{// ...modules:{// ...ImageResize:{// ...handleStyles:{backgroundColor:'black',border:'none',color:white// other camelCase styles for size display}}}});

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

varquill=newQuill(editor,{// ...modules:{// ...ImageResize:{// ...displayStyles:{backgroundColor:'black',border:'none',color:white// other camelCase styles for size display}}}});

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

varquill=newQuill(editor,{// ...modules:{// ...ImageResize:{// ...toolbarStyles:{backgroundColor:'black',border:'none',color:white// other camelCase styles for size display},toolbarButtonStyles:{// ...},toolbarButtonSvgStyles:{// ...},}}});

`BaseModule` - Include your own custom module

You can write your own module by extending theBaseModule class, and then including it inthe module setup.

For example,

import{Resize,BaseModule}from'quill-image-resize-module';classMyModuleextendsBaseModule{// See src/modules/BaseModule.js for documentation on the various lifecycle callbacks}varquill=newQuill(editor,{// ...modules:{// ...ImageResize:{modules:[MyModule,Resize],// ...}}});