Quill ImageUpload Module

A module for Quill rich text editor to upload images to be selected from toolbar editor.

Usage

Webpack/ES6

import Quill from 'quill';
import { ImageUpload } from 'quill-image-upload';

Quill.register('modules/imageUpload', ImageUpload);

const quill = new Quill(editor, {
    // ...
    modules: {
        // ...
        imageUpload: {
            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
            callbackOK: (serverResponse, next) => {
                next(serverResponse);   
            },
            // personalize failed callback
            callbackKO: (serverError) => {
                alert(serverError);
            },
            // optional
            // add callback when a image have been chosen
            checkBeforeSend: (file, next) => {
                console.log(file);
                next(file); // go back to component and send to the server
            }
        }
    }
});

Script Tag

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

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

var quill = new Quill(editor, {
    // ...
    modules: {
        // ...
        imageUpload: {
            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
            callbackOK: (serverResponse, next) => {
                next(serverResponse);   
            },
            // personalize failed callback
            callbackKO: (serverError) => {
                alert(serverError);
            }
        }
    }
});