# quill-image-resize-module

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

Latest version **3.0.0** (published 2017-04-18) · MIT license · 0 weekly downloads

## Install

```sh
npm install quill-image-resize-module
pnpm add quill-image-resize-module
yarn add quill-image-resize-module
bun add quill-image-resize-module
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 3.0.0 |
| Published | 2017-04-18 |
| First published | 2017-03-25 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 3 |
| Known vulnerabilities | 0 (+1 in 1 direct dependencies) |
| Install scripts | no |
| GitHub stars | 482 |
| Author | @kensnyder |
| Maintainers | kensnyder |
| Keywords | quill, quilljs, image, resize, sizer |

## Links

- npm: https://www.npmjs.com/package/quill-image-resize-module
- Repository: https://github.com/kensnyder/quill-image-resize-module
- Homepage: https://github.com/kensnyder/quill-image-resize-module#readme
- Issues: https://github.com/kensnyder/quill-image-resize-module/issues
- npm.io page: https://npm.io/package/quill-image-resize-module

## Dependencies (3)

- [quill](https://npm.io/package/quill.md) ^1.2.2
- [lodash](https://npm.io/package/lodash.md) ^4.17.4
- [raw-loader](https://npm.io/package/raw-loader.md) ^0.5.1

## Alternatives

- [exif-parser](https://npm.io/package/exif-parser.md) — 3.8M weekly downloads
- [vite-plugin-compression](https://npm.io/package/vite-plugin-compression.md) — 569.5K weekly downloads
- [pica](https://npm.io/package/pica.md) — 442.4K weekly downloads
- [@reportportal/client-javascript](https://npm.io/package/@reportportal/client-javascript.md) — 408.8K weekly downloads
- [@tldraw/state](https://npm.io/package/@tldraw/state.md) — 316.0K weekly downloads

## Recent versions

- 3.0.0 (latest) — 2017-04-18
- 1.0.0 — 2017-03-25

## README

# Quill ImageResize Module

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

Also see [quill-image-drop-module](https://github.com/kensnyder/quill-image-drop-module),
a module that enables copy-paste and drag/drop for Quill.

## Demo

[Plunker](https://plnkr.co/edit/gq708AOrSBOWSlHcFslG?p=preview)

## Usage

### Webpack/ES6

```javascript
import Quill from 'quill';
import { ImageResize } from 'quill-image-resize-module';

Quill.register('modules/imageResize', ImageResize);

const quill = new Quill(editor, {
    // ...
    modules: {
        // ...
        imageResize: {
            // See optional "config" below
        }
    }
});
```

### Script Tag

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

```html
<script src="/node_modules/quill-image-resize-module/image-resize.min.js"></script>
```

```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-resize-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 ],
            // ...
        }
    }
});
```

---
_Source: https://npm.io/package/quill-image-resize-module · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._