Quill ImageHandler Module

A module for Quill rich text editor to allow images to be uploaded to a server instead of being base64 encoded. Adds a button to the toolbar for users to click, also handles drag,dropped and pasted images.

Demo

Install

Install with npm:

1npm install quill-image-uploader --save

Webpack/ES6

1import Quill from "quill";
2import ImageUploader from "quill-image-uploader";
3
4import 'quill-image-uploader/dist/quill.imageUploader.min.css';
5
6Quill.register("modules/imageUploader", ImageUploader);
7
8const quill = new Quill(editor, {
9  // ...
10  modules: {
11    // ...
12    imageUploader: {
13      upload: (file) => {
14        return new Promise((resolve, reject) => {
15          setTimeout(() => {
16            resolve(
17              "https://upload.wikimedia.org/wikipedia/commons/thumb/6/6a/JavaScript-logo.png/480px-JavaScript-logo.png"
18            );
19          }, 3500);
20        });
21      },
22    },
23  },
24});

Quickstart (React with react-quill)

React Example on CodeSandbox

Quickstart (script tag)

Example on CodeSandbox

1// A link to quill.js
2<script src="/dist/quill.js"></script>
3<script src="/dist/quill.imageUploader.min.js"></script>
4
5Quill.register("modules/imageUploader", ImageUploader);
6
7var quill = new Quill(editor, {
8  // ...
9  modules: {
10    // ...
11    imageUploader: {
12      upload: file => {
13        return new Promise((resolve, reject) => {
14          setTimeout(() => {
15            resolve(
16              "https://upload.wikimedia.org/wikipedia/commons/thumb/6/6a/JavaScript-logo.png/480px-JavaScript-logo.png"
17            );
18          }, 3500);
19        });
20      }
21    }
22  }
23});