Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/NoelOConnell/quill-image-uploader
A module for Quill rich text editor to allow images to be uploaded to a server instead of being base64 encoded
https://github.com/NoelOConnell/quill-image-uploader
Last synced: about 1 month ago
JSON representation
A module for Quill rich text editor to allow images to be uploaded to a server instead of being base64 encoded
- Host: GitHub
- URL: https://github.com/NoelOConnell/quill-image-uploader
- Owner: NoelOConnell
- License: mit
- Created: 2018-08-27T21:12:01.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2024-07-18T14:27:05.000Z (5 months ago)
- Last Synced: 2024-10-14T00:31:41.036Z (about 2 months ago)
- Language: JavaScript
- Size: 557 KB
- Stars: 239
- Watchers: 5
- Forks: 97
- Open Issues: 33
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome-quill - quill-image-uploader - Upload image to server, adds toolbar button and handles dropped/pastes images (Uncategorized / Uncategorized)
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:
```bash
npm install quill-image-uploader --save
```
### Webpack/ES6
```javascript
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](https://codesandbox.io/s/react-quill-demo-qr8xd)
### Quickstart (script tag)
Example on [CodeSandbox](https://codesandbox.io/s/mutable-tdd-lrsvh)
```javascript
// A link to quill.js
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);
});
}
}
}
});
```