Package Exports
- quill-image-uploader-up
- quill-image-uploader-up/src/quill.imageUploader.js
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-uploader-up) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.
Readme
Quill ImageHandler Module
A module for Quill rich text editor to allow images to be uploaded to a server instead of being base64 encoded. Adds a button to the toolbar for users to click, also handles drag,dropped and pasted images.
Demo
Install
Install with npm:
npm install quill-image-uploader --save
Webpack/ES6
import Quill from "quill";
import ImageUploader from "quill-image-uploader";
import 'quill-image-uploader/dist/quill.imageUploader.min.css';
Quill.register("modules/imageUploader", ImageUploader);
const quill = new Quill(editor, {
// ...
modules: {
// ...
imageUploader: {
upload: (file) => {
return new Promise((resolve, reject) => {
setTimeout(() => {
resolve(
"https://upload.wikimedia.org/wikipedia/commons/thumb/6/6a/JavaScript-logo.png/480px-JavaScript-logo.png"
);
}, 3500);
});
},
},
},
});
Quickstart (React with react-quill)
React Example on CodeSandbox
Quickstart (script tag)
Example on CodeSandbox
// A link to quill.js
<script src="/dist/quill.js"></script>
<script src="/dist/quill.imageUploader.min.js"></script>
Quill.register("modules/imageUploader", ImageUploader);
var quill = new Quill(editor, {
// ...
modules: {
// ...
imageUploader: {
upload: file => {
return new Promise((resolve, reject) => {
setTimeout(() => {
resolve(
"https://upload.wikimedia.org/wikipedia/commons/thumb/6/6a/JavaScript-logo.png/480px-JavaScript-logo.png"
);
}, 3500);
});
}
}
}
});