@looop/quill-image-upload

0.1.3 • Public • Published

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

Package Sidebar

Install

npm i @looop/quill-image-upload

Weekly Downloads

1

Version

0.1.3

License

MIT

Unpacked Size

29.5 kB

Total Files

11

Last publish

Collaborators

  • misticek
  • edtsech
  • capaj
  • lukassvihel
  • jiri-looop