quill-image-drop-and-paste

QuillImageDropAndPaste

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

This module supported drop and paste image into the quill editor, by default, it would insert a image with a base64 url. Because of a base64 string was too large, if we saved it into the database, it could easilly out of the size of the column, the best practice was to save the image on our server and returned the image's url, and finally we inserted the image with the returned url into the editor.

Examples

React Demo

Vue2 Demo

Vue3 Demo

Angular Demo

Next.js Demo (full example with client and server side image upload implementation)

Script Demo

Install

npm install quill-image-drop-and-paste --save

Usage

ES6

import Quill from 'quill'
import QuillImageDropAndPaste from 'quill-image-drop-and-paste'

Quill.register('modules/imageDropAndPaste', QuillImageDropAndPaste)

const quill = new Quill('#editor-container', {
  modules: {
    imageDropAndPaste: {
      // add an custom image handler
      handler: imageHandler,
    },
  },
})

/**
 * Do something to our dropped or pasted image
 * @param.imageDataUrl {string} - image's dataURL
 * @param.type {string} - image's mime type
 * @param.imageData {ImageData} - provided more functions to handle the image
 *   - imageData.toBlob() {function} - convert image to a BLOB Object
 *   - imageData.toFile(filename?: string) {function} - convert image to a File Object. filename is optional, it will generate a random name if the original image didn't have a name.
 *   - imageData.minify(options) {function)- minify the image, return a promise
 *      - options.maxWidth {number} - specify the max width of the image, default is 800
 *      - options.maxHeight {number} - specify the max height of the image, default is 800
 *      - options.quality {number} - specify the quality of the image, default is 0.8
 */
function imageHandler(imageDataUrl, type, imageData) {
  const blob = imageData.toBlob()
  const file = imageData.toFile()

  // generate a form data
  const formData = new FormData()

  // append blob data
  formData.append('file', blob)

  // or just append the file
  formData.append('file', file)

  // upload image to your server
  callUploadAPI(your_upload_url, formData, (err, res) => {
    if (err) return
    // success? you should return the uploaded image's url
    // then insert into the quill editor
    let index = (quill.getSelection() || {}).index
    if (index === undefined || index < 0) index = quill.getLength()
    quill.insertEmbed(index, 'image', res.data.image_url, 'user')
  })
}

Minify image before upload to the server.

function imageHandler(imageDataUrl, type, imageData) {
  imageData
    .minify({
      maxWidth: 320,
      maxHeight: 320,
      quality: 0.7,
    })
    .then((miniImageData) => {
      const blob = miniImageData.toBlob()
      const file = miniImageData.toFile()
      // create a form data, and upload to the server...
    })
}

Additional, you could rewrite the toolbar's insert image button with our image handler.

import { ImageData } from 'quill-image-drop-and-paste'

quill.getModule('toolbar').addHandler('image', function (clicked) {
  if (clicked) {
    let fileInput = this.container.querySelector('input.ql-image[type=file]')
    if (fileInput == null) {
      fileInput = document.createElement('input')
      fileInput.setAttribute('type', 'file')
      fileInput.setAttribute(
        'accept',
        'image/png, image/gif, image/jpeg, image/bmp, image/x-icon'
      )
      fileInput.classList.add('ql-image')
      fileInput.addEventListener('change', function (e) {
        const files = e.target.files
        let file
        if (files.length > 0) {
          file = files[0]
          const type = file.type
          const reader = new FileReader()
          reader.onload = (e) => {
            // handle the inserted image
            const dataUrl = e.target.result
            imageHandler(dataUrl, type, new ImageData(dataUrl, type, file.name))
            fileInput.value = ''
          }
          reader.readAsDataURL(file)
        }
      })
    }
    fileInput.click()
  }
})

⚠️ Can be confused: ImageData from quill-image-drop-and-paste is different from ImageData in the Web API.

Script Tag

Copy dist/quill-image-drop-and-paste.min.js into your web root or include from node_modules

<script src="/node_modules/quill-image-drop-and-paste/quill-image-drop-and-paste.min.js"></script>

const quill = new Quill(editorSelector, {
  // ...
  modules: {
    imageDropAndPaste: {
      // add an custom image handler
      handler: imageHandler,
    },
  },
})

// access ImageData
// avoid to cover window's ImageData constructor, we should give it another name
const QuillImageData = QuillImageDropAndPaste.ImageData

Finally

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

Options

autoConvert

Automatic insert the image to the editor while the pasted content is an image's url(plain text). Default true.

enableNativeUploader

Whether enable Quill's original uploader. Default false.

handler

The image handler.