Package Exports

quill-image-upload

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (quill-image-upload) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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. If the url is empty then the base64 returns
            method: 'POST', // change query method, default 'POST'
            name: 'image', // custom form name
            withCredentials: false, // withCredentials
            headers: {}, // add custom headers, example { token: 'your-token'}
            csrf: { token: 'token', hash: '' }, // add custom CSRF
            customUploader: () => {}, // add custom uploader
            // 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. If the url is empty then the base64 returns
            method: 'POST', // change query method, default 'POST'
            name: 'image', // custom form name
            withCredentials: false, // withCredentials
            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);
            }
        }
    }
});