tiptap/docs/src/docPages/api/marks/link.md

38 lines
1.9 KiB
Markdown
Raw Normal View History

2020-08-19 03:39:41 +08:00
# Link
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
In a real world application, you would probably add a more sophisticated user interface. [Check out the example](/examples/links) to see how that could look like.
Pasted URLs will be linked automatically.
2020-08-19 03:39:41 +08:00
## Installation
```bash
2020-10-30 21:24:16 +08:00
# with npm
npm install @tiptap/extension-link
2020-10-30 21:24:16 +08:00
# with Yarn
yarn add @tiptap/extension-link
```
2020-09-23 18:03:03 +08:00
## Settings
2020-11-18 19:12:34 +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. |
## Commands
| Command | Parameters | Description |
2020-09-26 01:05:21 +08:00
| ------- | -------------- | ----------------------------------------------------------- |
| link | href<br>target | Link the selected text. Removes a link, if `href` is empty. |
## Keyboard shortcuts
2020-09-26 01:05:21 +08:00
:::warning Doesnt have a keyboard shortcut
This extension doesnt bind a specific keyboard shortcut. You would probably open your custom UI on `Mod-k` though.
2020-09-26 01:05:21 +08:00
:::
## Source code
[packages/extension-link/](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-link/)
## Usage
<demo name="Marks/Link" highlight="3-8,19,38,55" />