A quill plugin to deal with pasting and droping images and html including images
npm install quill2-image-drop-and-pastequill2-image-drop-and-paste
---
[![NPM version][npm-image]][npm-url]
[![build status][gitflow-image]][gitflow-url]
[![Test coverage][codecov-image]][codecov-url]
[![npm download][download-image]][download-url]
[npm-image]: https://img.shields.io/npm/v/quill2-image-drop-and-paste.svg?style=flat-square
[npm-url]: https://npmjs.org/package/quill2-image-drop-and-paste
[gitflow-image]: https://github.com/x-cold/quill2-image-drop-and-paste/actions/workflows/nodejs.yml/badge.svg?branch=master
[gitflow-url]: https://github.com/x-cold/quill2-image-drop-and-paste/actions/workflows/nodejs.yml
[codecov-image]: https://codecov.io/gh/x-cold/quill2-image-drop-and-paste/branch/master/graph/badge.svg
[codecov-url]: https://codecov.io/gh/x-cold/quill2-image-drop-and-paste
[download-image]: https://badgen.net/npm/dt/quill2-image-drop-and-paste
[download-url]: https://npmjs.org/package/quill2-image-drop-and-paste
A quill plugin to deal with pasting and droping images and html including images. Example.
- Install the plugin
``bash`
npm i -S quill2-image-drop-and-paste
- Register the plugin and init quill instance
`ts
import Quill from 'quill';
import Quill2ImageDropAndPaste from 'quill2-image-drop-and-paste';
Quill.register('modules/imageDropAndPaste', Quill2ImageDropAndPaste);
const quill = new Quill('#editor-container', {
modules: {
// ...
imageDropAndPaste: {
upload: uploadImage,
imageDomainAllowList: [
'cdn.nlark.com'
],
imageAllowMatch(url: string) {
},
},
history: {
userOnly: true, // Recommend to turn on this option
},
// ...
},
});
function uploadImage(file: Blob, originalUrl: string): string {
}
`
- API documents: https://x-cold.github.io/quill2-image-drop-and-paste/
- React Demo
- Online showcase
- Source code
- npm lint: Eslint codenpm lint:fix
- : Eslint code and try to fix problemsnpm start
- : Realtime complie codenpm run docs
- : Generate type documentsnpm run build
- : Build ths dist productsnpm run release
- : The same as npm run release:patchnpm run release:patch
- : Automatically upgrade patch versioin and update CHANGELOG.mdnpm run release:minor
- : Automatically upgrade minor versioin and update CHANGELOG.mdnpm run release:major
- : Automatically upgrade major versioin and update CHANGELOG.mdnpm run test
- : Run test suite via jest with code coveragenpm run test:watch
- : Run test suite in interactive watch modenpm run test:prod
- : Run linting and generate coveragenpm run deploy
- : Deploy github pages
- Local development
`bash`
npm install
npm start
- Local demo
``
cd examples/react-demo
npm install
npm link ../../
npm start
- Build
`bash`
npm run build
- Publish the package following semantic version
```
npm publish