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