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.
<!-- After quill script includes -->
<script src="https://unpkg.com/[email protected]/dist/index.js"></script>npm install quill-magic-url --saveimport Quill from 'quill'
import MagicUrl from 'quill-magic-url'
Quill.register('modules/magicUrl', MagicUrl)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,
},
},
})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
}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
}Regex used to check for mail addresses during typing. Set to
nullto disable conversion of mail addresses.
Default: /([\w-\.]+@[\w-\.]+\.[\w-\.]+)/gi
Example with custom Regex
magicUrl: {
mailRegularExpression: /([\w-\.]+@[\w-\.]+\.[\w-\.]+)/gi
}Regex used to check for mail addresses on paste. Set to
nullto disable conversion of mail addresses.
Default: /([\w-\.]+@[\w-\.]+\.[\w-\.]+)/gi
Example with custom Regex
magicUrl: {
globalMailRegularExpression: /([\w-\.]+@[\w-\.]+\.[\w-\.]+)/gi
}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.
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.
For some advanced URL Regex check this out.
![dependabot[bot] avatar](https://avatars.githubusercontent.com/in/29110?v=4 "dependabot[bot]")
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent