quill-magic-url
Checks for URLs during typing and pasting and automatically converts them to links.
Last updated 3 months ago .
· Repository · Bugs · Original npm · Tarball · package.json
$ cnpm install quill-magic-url 
SYNC missed versions from official npm registry.

quill-magic-url

tests publish

Checks for URLs and mail addresses during typing and pasting and automatically converts them to links and normalizes the links URL.

Thanks to @LFDM for the groundwork with quill-auto-links.

You can find a demo page here.

quill-magic-url in action

Install

From CDN

<!-- After quill script includes -->
<script src="https://unpkg.com/quill-magic-url@3.0.0/dist/index.js"></script>

With NPM

npm install quill-magic-url --save
import Quill from 'quill'
import MagicUrl from 'quill-magic-url'

Quill.register('modules/magicUrl', MagicUrl)

Usage

Basic usage with default options:

const quill = new Quill(editor, {
  modules: {
    magicUrl: true,
  },
})

Usage with custom options:

const quill = new Quill(editor, {
  modules: {
    magicUrl: {
      // Regex used to check URLs during typing
      urlRegularExpression: /(https?:\/\/[\S]+)|(www.[\S]+)|(tel:[\S]+)/g,
      // Regex used to check URLs on paste
      globalRegularExpression: /(https?:\/\/|www\.|tel:)[\S]+/g,
    },
  },
})

Options

urlRegularExpression

Regex used to check for URLs during typing.

Default: /(https?:\/\/|www\.)[\w-\.]+\.[\w-\.]+(\/([\S]+)?)?/gi

Example with custom Regex

magicUrl: {
  urlRegularExpression: /(https?:\/\/[\S]+)|(www.[\S]+)|(tel:[\S]+)/g
}

globalRegularExpression

Regex used to check for URLs on paste.

Default: /(https?:\/\/|www\.)[\w-\.]+\.[\w-\.]+(\/([\S]+)?)?/gi

Example with custom Regex

magicUrl: {
  globalRegularExpression: /(https?:\/\/|www\.|tel:)[\S]+/g
}

mailRegularExpression

Regex used to check for mail addresses during typing. Set to null to disable conversion of mail addresses.

Default: /([\w-\.]+@[\w-\.]+\.[\w-\.]+)/gi

Example with custom Regex

magicUrl: {
  mailRegularExpression: /([\w-\.]+@[\w-\.]+\.[\w-\.]+)/gi
}

globalMailRegularExpression

Regex used to check for mail addresses on paste. Set to null to disable conversion of mail addresses.

Default: /([\w-\.]+@[\w-\.]+\.[\w-\.]+)/gi

Example with custom Regex

magicUrl: {
  globalMailRegularExpression: /([\w-\.]+@[\w-\.]+\.[\w-\.]+)/gi
}

normalizeRegularExpression

Regex used to check for URLs to be normalized.

Default: /(https?:\/\/|www\.)[\S]+/i

You will most likely want to keep this options default value.

normalizeUrlOptions

Options for normalizing the URL

Default:

{
  stripWWW: false
}

Example with custom options

magicUrl: {
  normalizeUrlOptions: {
    stripHash: true,
    stripWWW: false,
    normalizeProtocol: false
  }
}

Available options

We use normalize-url for normalizing URLs. You can find a detailed description of the possible options here.

More infos on URL Regex

For some advanced URL Regex check this out.

Current Tags

  • 4.1.4                                ...           latest (3 months ago)

30 Versions

  • 0.0.1                                ...           5 years ago
  • 0.0.2                                ...           5 years ago
  • 0.0.3                                ...           5 years ago
  • 0.0.4                                ...           5 years ago
  • 0.0.5                                ...           5 years ago
  • 0.0.6                                ...           4 years ago
  • 0.0.7                                ...           4 years ago
  • 0.0.8                                ...           4 years ago
  • 0.1.0                                ...           4 years ago
  • 1.0.0                                ...           4 years ago
  • 1.0.1                                ...           3 years ago
  • 1.0.2                                ...           3 years ago
  • 1.0.3                                ...           3 years ago
  • 2.0.0                                ...           2 years ago
  • 2.0.1                                ...           2 years ago
  • 2.0.2                                ...           2 years ago
  • 2.0.3                                ...           2 years ago
  • 2.0.4                                ...           2 years ago
  • 2.0.5                                ...           2 years ago
  • 2.1.5                                ...           a year ago
  • 3.0.0                                ...           a year ago
  • 3.0.1                                ...           a year ago
  • 3.0.2                                ...           a year ago
  • 4.0.0                                ...           a year ago
  • 4.0.1                                ...           a year ago
  • 4.1.0                                ...           a year ago
  • 4.1.1                                ...           a year ago
  • 4.1.2                                ...           a year ago
  • 4.1.3                                ...           10 months ago
  • 4.1.4                                ...           3 months ago
Maintainers (1)
Dependencies (2)
Dev Dependencies (11)

Copyright © npmmirror.com | 浙ICP备15033595号-63 |