quill-image-drop-and-paste
    TypeScript icon, indicating that this package has built-in type declarations

    1.2.9 • Public • Published

    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

    Vue 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()
      }
    })

    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 didnot config a image handler, it will insert the image with dataURL into the quill editor directory after your drop/paste.

    Install

    npm i quill-image-drop-and-paste

    DownloadsWeekly Downloads

    3,663

    Version

    1.2.9

    License

    ISC

    Unpacked Size

    135 kB

    Total Files

    13

    Last publish

    Collaborators

    • jacketchen