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