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

1yarn add quill-image --save

Usage

ES6

1import Quill from 'quill'
2const { QuillImage, QuillImageBindings } = require('quill-image');
3
4const imgBlot = new QuillImage(Quill, { handler: imageHandler });
5
6const quill = new Quill('#editor-container', {
7  modules: {
8    keyboard: {
9      bindings: {
10        ...QuillImageBindings,
11      }
12    }
13  }
14})
15
16/**
17* Do something to our dropped or pasted image
18* @param.quill - the quill instance
19* @param.guid - a unique guid for this image, if required
20* @param.imageDataUrl - image's base64 url
21* @param.type - image's mime type
22*/
23async function handler(quill, guid, dataUrl, type) {
24  // give a default mime type if the type was null
25  if (!type) type = 'image/png';
26
27  // Convert base64 to blob
28  const blob = await fetch(b64Image).then(res => res.blob());
29
30  // Generate a filename
31  const filename = `${guid}.${type.match(/^image\/(\w+)$/i)[1]}`;
32
33  // Generate a form data
34  const formData = new FormData();
35  formData.append('filename', filename);
36  formData.append('file', blob);
37
38  // Upload your file here – promise should resolve with the public URL
39  return new Promise((resolve) => {
40    setTimeout(() => resolve('https://media2.giphy.com/media/RQgzLsPYlzrBC/source.gif'), 3000);
41  });
42}
43
44const quill = new Quill(dom);
45imgBlot.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.