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
  • 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

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