quill2-image-drop-and-paste

A quill plugin to deal with pasting and droping images and html including images. Example.

Usage

• Install the plugin

1npm i -S quill2-image-drop-and-paste

• Register the plugin and init quill instance

1import Quill from 'quill';
2import Quill2ImageDropAndPaste from 'quill2-image-drop-and-paste';
3
4Quill.register('modules/imageDropAndPaste', Quill2ImageDropAndPaste);
5
6const quill = new Quill('#editor-container', {
7  modules: {
8    // ...
9    imageDropAndPaste: {
10      upload: uploadImage,
11      imageDomainAllowList: [
12        'cdn.nlark.com'
13      ],
14      imageAllowMatch(url: string) {
15
16      },
17    },
18    history: {
19      userOnly: true, // Recommend to turn on this option
20    },
21    // ...
22  },
23});
24
25function uploadImage(file: Blob, originalUrl: string): string {
26
27}

• API documents: https://x-cold.github.io/quill2-image-drop-and-paste/

Examples

• React Demo
  • Online showcase
  • Source code

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 as npm 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

1npm install
2npm start

• Local demo

cd examples/react-demo
npm install
npm link ../../
npm start

• Build

1npm run build

• Publish the package following semantic version

npm publish