mirror of
https://github.com/ueberdosis/tiptap.git
synced 2025-01-18 14:13:21 +08:00
add content to the link extension page
This commit is contained in:
Hans Pagel
parent
c4d9bf9b41
commit
304504da73
@ -1,8 +1,11 @@
|
||||
<template>
|
||||
<div v-if="editor">
|
||||
<button @click="addLink">
|
||||
<button @click="addLink" :class="{ 'is-active': editor.isActive('link') }">
|
||||
link
|
||||
</button>
|
||||
<button @click="editor.chain().focus().removeMark('link').run()" v-if="editor.isActive('link')">
|
||||
remove
|
||||
</button>
|
||||
<editor-content :editor="editor" />
|
||||
</div>
|
||||
</template>
|
||||
@ -36,7 +39,7 @@ export default {
|
||||
],
|
||||
content: `
|
||||
<p>
|
||||
Try to add some links to the <a href="https://en.wikipedia.org/wiki/World_Wide_Web">world wide web</a>. By default every link will get a <code>rel="noopener noreferrer nofollow"</code> attribute.
|
||||
Try to add some links to the <a href="https://en.wikipedia.org/wiki/World_Wide_Web" target="_self">world wide web</a>. By default every link will get a <code>rel="noopener noreferrer nofollow"</code> attribute.
|
||||
</p>
|
||||
`,
|
||||
})
|
||||
@ -44,9 +47,9 @@ export default {
|
||||
|
||||
methods: {
|
||||
addLink() {
|
||||
const url = window.prompt('Link:')
|
||||
const url = window.prompt('URL')
|
||||
|
||||
this.editor.link(url)
|
||||
this.editor.chain().focus().link({ href: url }).run()
|
||||
},
|
||||
},
|
||||
|
||||
|
||||
@ -44,13 +44,13 @@ editor.off('update', callback)
|
||||
```
|
||||
|
||||
## List of events
|
||||
| Event | Description | Parameters |
|
||||
| -------- | ----------------------------- | ------------------------------------ |
|
||||
| `blur` | Editor isn’t focused anymore. | `{ event }` |
|
||||
| `focus` | Editor is in focus. | `{ event }` |
|
||||
| `init` | Editor has been initialized. | *None* |
|
||||
| `update` | Content has changed. | *None* |
|
||||
| `transaction` | State has changed. | `{ transaction }` |
|
||||
| Event | Description | Parameters |
|
||||
| ------------- | ----------------------------- | ----------------- |
|
||||
| `blur` | Editor isn’t focused anymore. | `{ event }` |
|
||||
| `focus` | Editor is in focus. | `{ event }` |
|
||||
| `init` | Editor has been initialized. | *None* |
|
||||
| `transaction` | State has changed. | `{ transaction }` |
|
||||
| `update` | Content has changed. | *None* |
|
||||
|
||||
:::info List of hooks
|
||||
The according hooks are called `onBlur`, `onFocus`, `onInit`, `onUpdate` and `onTransaction`.
|
||||
|
||||
@ -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 Doesn’t have a keyboard shortcut
|
||||
This extension doesn’t 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" />
|
||||
|
||||
@ -1,3 +1,3 @@
|
||||
# Links
|
||||
|
||||
<demo name="Examples/Links" />
|
||||
<demo name="Examples/Links" />
|
||||
|
||||
@ -19,9 +19,9 @@
|
||||
# - title: Floating Menu
|
||||
# link: /examples/floating-menu
|
||||
# draft: true
|
||||
# - title: Links
|
||||
# link: /examples/links
|
||||
# draft: true
|
||||
- title: Links
|
||||
link: /examples/links
|
||||
draft: true
|
||||
# - title: Images
|
||||
# link: /examples/images
|
||||
# draft: true
|
||||
@ -145,7 +145,6 @@
|
||||
link: /api/extensions/italic
|
||||
- title: Link
|
||||
link: /api/extensions/link
|
||||
draft: true
|
||||
- title: ListItem
|
||||
link: /api/extensions/list-item
|
||||
# - title: Mention
|
||||
|
||||
@ -6,9 +6,10 @@ import { Plugin, PluginKey } from 'prosemirror-state'
|
||||
export interface LinkOptions {
|
||||
openOnClick: boolean,
|
||||
target: string,
|
||||
rel: string,
|
||||
}
|
||||
|
||||
export type LinkCommand = (url?: string) => Command
|
||||
export type LinkCommand = (options: {href?: string, target?: string}) => Command
|
||||
|
||||
declare module '@tiptap/core/src/Editor' {
|
||||
interface Commands {
|
||||
@ -22,7 +23,8 @@ export default new Mark<LinkOptions>()
|
||||
.name('link')
|
||||
.defaults({
|
||||
openOnClick: true,
|
||||
target: '',
|
||||
target: '_self',
|
||||
rel: 'noopener noreferrer nofollow',
|
||||
})
|
||||
.schema(({ options }) => ({
|
||||
attrs: {
|
||||
@ -45,19 +47,17 @@ export default new Mark<LinkOptions>()
|
||||
],
|
||||
toDOM: node => ['a', {
|
||||
...node.attrs,
|
||||
rel: 'noopener noreferrer nofollow',
|
||||
target: options.target,
|
||||
rel: options.rel,
|
||||
target: node.attrs.target ? node.attrs.target : options.target,
|
||||
}, 0],
|
||||
}))
|
||||
.commands(({ name }) => ({
|
||||
link: url => ({ commands }) => {
|
||||
if (!url) {
|
||||
link: attributes => ({ commands }) => {
|
||||
if (!attributes.href) {
|
||||
return commands.removeMark(name)
|
||||
}
|
||||
|
||||
return commands.updateMark(name, {
|
||||
href: url,
|
||||
})
|
||||
return commands.updateMark(name, attributes)
|
||||
},
|
||||
}))
|
||||
.pasteRules(({ type }) => [
|
||||
|
||||
Loading…
Reference in New Issue
Block a user