qiu

quill-image-upload

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

Showing:

Popularity

Downloads/wk

302

GitHub Stars

104

Maintenance

Last Commit

3yrs ago

Contributors

4

Package

Dependencies

1

Size (min+gzip)

0.8KB

License

MIT

Type Definitions

Tree-Shakeable

No?

Categories

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);
            }
        }
    }
});

Rate & Review

Great Documentation0
Easy to Use0
Performant0
Highly Customizable0
Bleeding Edge0
Responsive Maintainers0
Poor Documentation0
Hard to Use0
Slow0
Buggy0
Abandoned0
Unwelcoming Community0
100