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
Plunker
Usage
Webpack/ES6
import Quill from 'quill';
import { ImageResize } from 'quill-image-resize-module';
Quill.register('modules/imageResize', ImageResize);
const quill = new Quill(editor, {
modules: {
imageResize: {
}
}
});
Script Tag
Copy image-resize.min.js into your web root or include from node_modules
<script src="/node_modules/quill-image-resize-module/image-resize.min.js"></script>
var quill = new Quill(editor, {
modules: {
ImageResize: {
}
}
});
Config
For the default experience, pass an empty object, like so:
var quill = new Quill(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:
const quill = new Quill(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:
var quill = new Quill(editor, {
modules: {
ImageResize: {
handleStyles: {
backgroundColor: 'black',
border: 'none',
color: white
}
}
}
});
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:
var quill = new Quill(editor, {
modules: {
ImageResize: {
displayStyles: {
backgroundColor: 'black',
border: 'none',
color: white
}
}
}
});
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:
var quill = new Quill(editor, {
modules: {
ImageResize: {
toolbarStyles: {
backgroundColor: 'black',
border: 'none',
color: white
},
toolbarButtonStyles: {
},
toolbarButtonSvgStyles: {
},
}
}
});
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,
import { Resize, BaseModule } from 'quill-image-resize-module';
class MyModule extends BaseModule {
}
var quill = new Quill(editor, {
modules: {
ImageResize: {
modules: [ MyModule, Resize ],
}
}
});