# quill-image

> A quill editor module for drop and paste image, with a callback hook before insert image into the editor

Latest version **0.0.21** (published 2022-01-12) · MIT license · 0 weekly downloads

## Install

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

## Health

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

Positive: no vulnerabilities.

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

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.21 |
| Published | 2022-01-12 |
| First published | 2019-11-13 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 68.7 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Adam Miller |
| Maintainers | epicmiller |
| Keywords | quill, editor, drop, image, paste, image |

## Links

- npm: https://www.npmjs.com/package/quill-image
- npm.io page: https://npm.io/package/quill-image

## Alternatives

- [ext-list](https://npm.io/package/ext-list.md) — 6.3M weekly downloads
- [@lexical/selection](https://npm.io/package/@lexical/selection.md) — 3.8M weekly downloads
- [@lexical/text](https://npm.io/package/@lexical/text.md) — 3.6M weekly downloads
- [@lexical/clipboard](https://npm.io/package/@lexical/clipboard.md) — 3.0M weekly downloads
- [@tiptap/extension-mention](https://npm.io/package/@tiptap/extension-mention.md) — 3.0M weekly downloads

## Recent versions

- 0.0.21 (latest) — 2022-01-12
- 0.0.20 — 2020-06-15
- 0.0.19 — 2020-04-13
- 0.0.18 — 2020-01-21
- 0.0.17 — 2020-01-21
- 0.0.16 — 2020-01-21
- 0.0.15 — 2020-01-21
- 0.0.14 — 2020-01-21
- 0.0.13 — 2020-01-21
- 0.0.12 — 2020-01-09
- 0.0.11 — 2020-01-09
- 0.0.10 — 2020-01-09
- 0.0.9 — 2020-01-02
- 0.0.8 — 2019-12-23
- 0.0.7 — 2019-12-23
- … 6 more at https://npm.io/package/quill-image/versions

## README

# Quill Image
A quill editor module that enables image insertion through drab/drop, clipboard paste, and the default toolbars. Configuration has callback hook where you can upload the image to your servers. The base64 image preview will be replaces with the returned public URL. The inserted image has support for basic layout (float left, float right, center, and full width), image captions, and alt text.

## Install
```bash
yarn add quill-image --save
```

## Usage

### ES6

```javascript
import Quill from 'quill'
const { QuillImage, QuillImageBindings } = require('quill-image');

const imgBlot = new QuillImage(Quill, { handler: imageHandler });

const quill = new Quill('#editor-container', {
  modules: {
    keyboard: {
      bindings: {
        ...QuillImageBindings,
      }
    }
  }
})

/**
* Do something to our dropped or pasted image
* @param.quill - the quill instance
* @param.guid - a unique guid for this image, if required
* @param.imageDataUrl - image's base64 url
* @param.type - image's mime type
*/
async function handler(quill, guid, dataUrl, type) {
  // give a default mime type if the type was null
  if (!type) type = 'image/png';

  // Convert base64 to blob
  const blob = await fetch(b64Image).then(res => res.blob());

  // Generate a filename
  const filename = `${guid}.${type.match(/^image\/(\w+)$/i)[1]}`;

  // Generate a form data
  const formData = new FormData();
  formData.append('filename', filename);
  formData.append('file', blob);

  // Upload your file here – promise should resolve with the public URL
  return new Promise((resolve) => {
    setTimeout(() => resolve('https://media2.giphy.com/media/RQgzLsPYlzrBC/source.gif'), 3000);
  });
}

const quill = new Quill(dom);
imgBlot.insert(quill);
```

If you did not config a image handler, it will insert the base64 image into the quill editor directory after you drop/paste a image.

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