add content to the link extension page

This commit is contained in:
Hans Pagel
2020-09-25 19:05:21 +02:00
parent c4d9bf9b41
commit 304504da73
6 changed files with 45 additions and 36 deletions

View File

@@ -1,5 +1,9 @@
# Link
Enables you to use the `<a>` HTML tag in the editor.
The Link extension adds support for `<a>` tags to the editor. The extension is renderless 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.
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.
## Installation
```bash
@@ -11,22 +15,25 @@ yarn add @tiptap/extension-link
```
## Settings
| Option | Type | Default | Description |
| ----------- | ------- | ------- | -------------------------------------------- |
| class | string | | Add a custom class to the rendered HTML tag. |
| openOnClick | Boolean | true | Specifies if links will be opened on click. |
| Option | Type | Default | Description |
| ----------- | ------- | ---------------------------- | -------------------------------------------- |
| class | string | | Add a custom class to the rendered HTML tag. |
| openOnClick | Boolean | true | If enabled, links will be opened on click. |
| rel | string | noopener noreferrer nofollow | Configure the `rel` attribute. |
| target | _self | | Set the default `target` of links. |
## Commands
| Command | Options | Description |
| ------- | ------- | ----------------------- |
| link | | Link the selected text. |
| Command | Options | Description |
| ------- | -------------- | ----------------------------------------------------------- |
| link | href<br>target | Link the selected text. Removes a link, if `href` is empty. |
## Keyboard shortcuts
* Windows/Linux: `Control` `K`
* macOS: `Cmd` `K`
:::warning Doesnt have a keyboard shortcut
This extension doesnt bind a specific keyboard shortcut. You would probably open your UI on `Mod-k` though.
:::
## Source code
[packages/extension-link/](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-link/)
## Usage
<demo name="Extensions/Link" highlight="" />
<demo name="Extensions/Link" highlight="3-8,19,38,52" />