LosEcher / quill-image-drop-module

A module for Quill rich text editor to allow images to be pasted and drag/dropped into the editor.

Quill ImageDrop Module

A module for Quill rich text editor to allow images to be pasted and drag/dropped into the editor.

Demo

Plunker

Usage

Webpack/ES6

import Quill from 'quill';
import { ImageDrop } from 'quill-image-drop-module';

Quill.register('modules/imageDrop', ImageDrop);

const quill = new Quill(editor, {
    // ...
    modules: {
        // ...
        imageDrop: true
    }
});

Script Tag

Copy image-drop.min.js into your web root or include from node_modules

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

var quill = new Quill(editor, {
    // ...
    modules: {
        // ...
        imageDrop: true
    }
});

Options

Possiblity to automatically upload your images.

imageDrop: {
    // direct upload configuration
    uploadImage: {
        url: "", // server url
        method: "POST", // change query method, default 'POST' 
        headers: {}, // add custom headers, example { token: 'your-token'}
        // personalize successful callback and call next function to insert new url to the editor
        success: (serverResponse, next) => {
            next(serverResponse);   
        },
        // personalize failed callback
        error: (serverError) => {
            console.log("error: " + serverError);
        }
    }
}