quill2-image-drop-and-paste

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

Usage no npm install needed!

<script type="module">
  import quill2ImageDropAndPaste from 'https://cdn.skypack.dev/quill2-image-drop-and-paste';
</script>

README

quill2-image-drop-and-paste

NPM version build status Test coverage npm download

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

Paste html

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 {

}

Examples

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

npm publish