quill-magic-url

Looking for maintainer: If anyone would like to take over responsibility for this plugin or create a new one for Quill 2.x, please let me know.

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.

Install

From CDN

<!-- After quill script includes -->
<script src="https://unpkg.com/[email protected]/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.