https://github.com/x-cold/quill2-image-drop-and-paste

A quill editor module for drop and paste image, with a callback hook before insert image into the editor
https://github.com/x-cold/quill2-image-drop-and-paste

Last synced: 2 months ago
JSON representation

A quill editor module for drop and paste image, with a callback hook before insert image into the editor

• Host: GitHub
• URL: https://github.com/x-cold/quill2-image-drop-and-paste
• Owner: x-cold
• Created: 2021-11-02T12:20:44.000Z (about 3 years ago)
• Default Branch: master
• Last Pushed: 2021-12-22T10:12:49.000Z (about 3 years ago)
• Last Synced: 2024-10-30T13:16:13.664Z (3 months ago)
• Language: TypeScript
• Homepage: https://x-cold.github.io/quill2-image-drop-and-paste/
• Size: 22.4 MB
• Stars: 6
• Watchers: 4
• Forks: 0
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md

Awesome Lists containing this project

• awesome-github-star - quill2-image-drop-and-paste - cold | 6 | (TypeScript)

README

        
quill2-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](https://x-cold.github.io/quill2-image-drop-and-paste/react-demo/).

![Paste html](https://github.com/x-cold/quill2-image-drop-and-paste/blob/master/screenshots/paste-html.gif?raw=true)

## Usage

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

## Examples

- React Demo

  - [Online showcase](https://x-cold.github.io/quill2-image-drop-and-paste/react-demo/)

  - [Source code](https://github.com/x-cold/quill2-image-drop-and-paste/tree/master/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 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](http://facebook.github.io/jest/docs/cli.html#watch)

 - `npm run test:prod`: Run linting and generate coverage

 - `npm run deploy`: Deploy github pages

### Cookbook

- 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](https://semver.org/)

```

npm publish

```