2020-08-19 03:39:41 +08:00
# Link
2021-01-25 17:35:52 +08:00
[](https://www.npmjs.com/package/@tiptap/extension-link)
[](https://npmcharts.com/compare/@tiptap/extension-link?minimal=true)
2020-11-13 18:04:31 +08:00
The Link extension adds support for `<a>` tags to the editor. The extension is headless too, there is no actual UI to add, modify or delete links. The usage example below uses the native JavaScript prompt to show you how that could work.
2020-09-26 01:05:21 +08:00
2020-12-01 19:03:50 +08:00
In a real world application, you would probably add a more sophisticated user interface.
2020-09-26 01:05:21 +08:00
2020-12-01 19:03:50 +08:00
Pasted URLs will be transformed to links automatically.
2020-08-19 03:39:41 +08:00
2020-09-23 15:52:04 +08:00
## Installation
```bash
2020-10-30 21:24:16 +08:00
# with npm
2020-09-23 15:52:04 +08:00
npm install @tiptap/extension -link
2020-10-30 21:24:16 +08:00
# with Yarn
2020-09-23 15:52:04 +08:00
yarn add @tiptap/extension -link
```
2020-09-23 18:03:03 +08:00
## Settings
2021-05-05 15:33:52 +08:00
| Option | Type | Default | Description |
| -------------- | --------- | ----------------------------------------------------------- | -------------------------------------------------------------------------------- |
| HTMLAttributes | `Object` | `{ target: '_blank', rel: 'noopener noreferrer nofollow' }` | Custom HTML attributes that should be added to the rendered HTML tag. |
| openOnClick | `Boolean` | `true` | If enabled, links will be opened on click. |
| linkOnPaste | `Boolean` | `true` | Adds a link to the current selection if the pasted content only contains an url. |
2020-09-23 18:39:09 +08:00
## Commands
2020-12-04 00:05:22 +08:00
| Command | Parameters | Description |
| ---------- | ------------------ | -------------------------------------------- |
| setLink | `href` < br > `target` | Link the selected text. |
| toggleLink | `href` < br > `target` | Add or remove a link from the selected text. |
| unsetLink | –
2020-09-23 18:39:09 +08:00
## Keyboard shortcuts
2020-09-26 01:05:21 +08:00
:::warning Doesn’
2020-11-03 23:43:35 +08:00
This extension doesn’ `Mod-k` though.
2020-09-26 01:05:21 +08:00
:::
2020-09-23 18:39:09 +08:00
## Source code
2021-04-21 21:31:11 +08:00
[packages/extension-link/ ](https://github.com/ueberdosis/tiptap/blob/main/packages/extension-link/ )
2020-09-23 18:39:09 +08:00
## Usage
2021-08-26 05:10:20 +08:00
< tiptap-demo name = "Marks/Link" > < / tiptap-demo >
