# quill-plugin-image

> Change quill default actions when insert images.

Latest version **0.0.6** (published 2018-06-13) · MIT license · 0 weekly downloads

## Install

```sh
npm install quill-plugin-image
pnpm add quill-plugin-image
yarn add quill-plugin-image
bun add quill-plugin-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.6 |
| Published | 2018-06-13 |
| First published | 2018-06-04 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 1 |
| Unpacked size | 7.4 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 1 |
| Author | Yansen |
| Maintainers | yansen_zh |
| Keywords | quill, image |

## Links

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

## Dependencies (1)

- [invariant](https://npm.io/package/invariant.md) ^2.2.4

## 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

- 0.0.6 (latest) — 2018-06-13
- 0.0.5 — 2018-06-06
- 0.0.4 — 2018-06-06
- 0.0.3 — 2018-06-06
- 0.0.2 — 2018-06-05
- 0.0.1 — 2018-06-04

## README

# quill-plugin-image

Change quill default actions when insert images.

[Quill](https://quilljs.com/docs/quickstart/) 是很不错的富文本编辑器。

自带的图片插入功能默认是自动插入 Base64 图片字串，这个 plugin 或者叫拓展修改了这种默认行为，而是将插入的行为 通过 Promise 暴露出来, 自己主导上传行为。

如果，这个扩展的功能对您来说太少，可以去试试  [NextBoy/quill-image-extend-module](https://github.com/NextBoy/quill-image-extend-module)

## Install 安装

```bash
npm install quill-plugin-image --save
```

## Useage 使用
```javascript
// es6 引入
import uploadImage from 'quill-plugin-image';

// var quill = new Quill();

// param: quill - the quill instance
// param: function -  file => Promise
uploadImage(quill, ((file) => {
  // 菊花转
  // loadding.start();

  // 1. 直接转 base64
  return new Promise((resolve, reject) => {
    const reader = new FileReader();
    reader.onload = (e) => {
        base64String = e.target.result;

        
        // loadding.stop();

        // or resolve({ src: base64String, alt: file.name });
        resolve(base64String);
    };
    reader.readAsDataURL(file);
  });

  // 2. ajax 或者 fetch 远程上传
  return new Promise((resolve, reject) => {
    const formData = new FormData();
    formData.append('any-name', file);

    fetch(
      'http://somedomain/path/to/your/upload/api',
      {
        body: formData,
        method: 'POST',
      }
    ).then(data => {
      // loadding.stop();

      // resolve 可以是 string 图片地址
      // 也可以是对象, 属性值是同 html img 元素一致
      resolve({ src: data.url, alt: data.alt || file.name });
    });
  });

  // 3. 获取其他的控制
  // 比如 jquery/zepto 上传, 进度条显示等
  // TODO:
}));
```

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