https://github.com/visualjerk/quill-magic-url
Automatically convert URLs to links in Quill
https://github.com/visualjerk/quill-magic-url
automatic link links quill quill-editor quilljs url
Last synced: 13 days ago
JSON representation
Automatically convert URLs to links in Quill
- Host: GitHub
- URL: https://github.com/visualjerk/quill-magic-url
- Owner: visualjerk
- License: mit
- Created: 2017-12-23T01:41:42.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2023-01-09T02:01:28.000Z (over 2 years ago)
- Last Synced: 2024-05-23T10:04:54.307Z (11 months ago)
- Topics: automatic, link, links, quill, quill-editor, quilljs, url
- Language: JavaScript
- Size: 2.37 MB
- Stars: 120
- Watchers: 3
- Forks: 41
- Open Issues: 8
-
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
- awesome-quill - quill-magic-url - Checks for URLs during typing / pasting and automatically converts them to links (Uncategorized / Uncategorized)
README
# 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](https://github.com/LFDM) for the groundwork with [quill-auto-links](https://github.com/SmallImprovements/quill-auto-links).
You can find a [demo page here](https://visualjerk.github.io/quill-magic-url/).
## Install
### From CDN
```html
```
### With NPM
```bash
npm install quill-magic-url --save
```
```javascript
import Quill from 'quill'
import MagicUrl from 'quill-magic-url'
Quill.register('modules/magicUrl', MagicUrl)
```
## Usage
**Basic usage with default options:**
```javascript
const quill = new Quill(editor, {
modules: {
magicUrl: true,
},
})
```
**Usage with custom options:**
```javascript
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**
```javascript
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**
```javascript
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**
```javascript
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**
```javascript
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:**
```javascript
{
stripWWW: false
}
```
**Example with custom options**
```javascript
magicUrl: {
normalizeUrlOptions: {
stripHash: true,
stripWWW: false,
normalizeProtocol: false
}
}
```
**Available options**
We use [normalize-url](https://github.com/sindresorhus/normalize-url) for normalizing URLs. You can find a detailed description of the possible options [here](https://github.com/sindresorhus/normalize-url#api).
## More infos on URL Regex
For some advanced URL Regex [check this out](https://mathiasbynens.be/demo/url-regex).