quill2-image-drop-and-paste
A quill plugin to deal with pasting and droping images and html including images. Example.
Usage
- Install the plugin
npm i -S quill2-image-drop-and-paste
- Register the plugin and init quill instance
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/
Examples
- React Demo
Development
NPM scripts
-
npm lint
: Eslint code -
npm lint:fix
: Eslint code and try to fix problems -
npm start
: Realtime complie code -
npm run docs
: Generate type documents -
npm run build
: Build ths dist products -
npm run release
: The same asnpm run release:patch
-
npm run release:patch
: Automatically upgrade patch versioin and update CHANGELOG.md -
npm run release:minor
: Automatically upgrade minor versioin and update CHANGELOG.md -
npm run release:major
: Automatically upgrade major versioin and update CHANGELOG.md -
npm run test
: Run test suite via jest with code coverage -
npm run test:watch
: Run test suite in interactive watch mode -
npm run test:prod
: Run linting and generate coverage -
npm run deploy
: Deploy github pages
Cookbook
- Local development
npm install
npm start
- Local demo
cd examples/react-demo
npm install
npm link ../../
npm start
- Build
npm run build
- Publish the package following semantic version
npm publish