https://github.com/devhau/quill-image-module
https://github.com/devhau/quill-image-module
Last synced: 8 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/devhau/quill-image-module
- Owner: devhau
- License: mit
- Created: 2022-06-30T08:35:08.000Z (almost 4 years ago)
- Default Branch: main
- Last Pushed: 2022-07-01T04:49:02.000Z (almost 4 years ago)
- Last Synced: 2025-08-05T09:48:06.735Z (10 months ago)
- Language: JavaScript
- Size: 44.9 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# Quill Image Module
A module for Quill rich text editor to allow images control.
## Demo
## Usage
### Webpack/ES6
```javascript
import Quill from "quill";
import { ImageResize } from "quill-image-module";
Quill.register("modules/imageResize", ImageResize);
const quill = new Quill(editor, {
// ...
modules: {
// ...
imageResize: {
// See optional "config" below
},
},
});
```
### Script Tag
Copy image-module.min.js into your web root or include from node_modules
```html
```
```javascript
var quill = new Quill(editor, {
// ...
modules: {
// ...
ImageResize: {
// See optional "config" below
},
},
});
```
### Config
For the default experience, pass an empty object, like so:
```javascript
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:
```javascript
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:
```javascript
var quill = new Quill(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:
```javascript
var quill = new Quill(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:
```javascript
var quill = new Quill(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 the `BaseModule` class, and then including it in
the module setup.
For example,
```javascript
import { Resize, BaseModule } from "quill-image-module";
class MyModule extends BaseModule {
// See src/modules/BaseModule.js for documentation on the various lifecycle callbacks
}
var quill = new Quill(editor, {
// ...
modules: {
// ...
ImageResize: {
modules: [MyModule, Resize],
// ...
},
},
});
```