Link
Insert and manage hyperlinks.
'use client';
import React from 'react';
import { Plate } from '@udecode/plate-common/react';
import { editorPlugins } from '@/components/editor/plugins/editor-plugins';
import { useCreateEditor } from '@/components/editor/use-create-editor';
import { Editor, EditorContainer } from '@/components/plate-ui/editor';
import { DEMO_VALUES } from './values/demo-values';
export default function Demo({ id }: { id: string }) {
const editor = useCreateEditor({
plugins: [...editorPlugins],
value: DEMO_VALUES[id],
});
return (
<Plate editor={editor}>
<EditorContainer variant="demo">
<Editor />
</EditorContainer>
</Plate>
);
}
安装
npm install @udecode/plate-link使用
import { LinkPlugin } from '@udecode/plate-link/react';
const plugins = [
// ...otherPlugins,
LinkPlugin.configure({
render: { afterEditable: () => <LinkFloatingToolbar /> },
}),
];快捷键
| Key | Description |
|---|---|
| Cmd + K | Add a link on the selected text. |
插件转换
editor.tf.insert.link
在编辑器中插入链接节点。
Parameters
创建链接节点的选项。
插入节点的其他选项。
插件 API
editor.api.floatingLink.hide
隐藏浮动链接并重置其状态。
editor.api.floatingLink.reset
重置浮动链接状态而不改变 openEditorId。
editor.api.floatingLink.show
为指定的模式和编辑器 ID 显示浮动链接。
Parameters
设置浮动链接的模式（'edit' 或 'insert'）。
要显示浮动链接的编辑器 ID。
editor.api.link.getAttributes
获取链接元素的属性。
Parameters
要获取属性的链接元素。
Returns
链接元素的 HTML 属性。
editor.api.link.submitFloatingLink
如果 URL 有效，则插入链接，关闭浮动链接，并聚焦编辑器。
Returns
如果链接插入成功则返回 true。
插件
LinkPlugin
Options
- 默认值：
- 默认值：
'meta+k, ctrl+k' - 默认值：
['http', 'https', 'mailto', 'tel'] - 默认值：
false - 默认值：
{} - 默认值：
true - 默认值：
isUrl
确定是否强制提交链接表单。
允许自定义 rangeBeforeOptions 配置。
{
matchString: ' ',
skipInvalid: true,
afterMatch: true,
}触发浮动链接的快捷键。
允许的 URL 协议列表。
确定是否跳过链接的净化。
链接元素的默认 HTML 属性。
默认情况下粘贴链接时保留选中的文本。
验证 URL 的回调函数。
可选的获取 URL 的 href 的回调函数。它返回一个与文本内容不同的可选链接。例如，对于 google.com 返回 https://google.com。
可选的回调函数，用于在验证前转换用户在 URL 输入框中提供的 URL。
在使用键盘快捷键或点击工具栏时，调用此函数获取链接 URL。默认行为是使用浏览器原生的 prompt。
API
insertLink
在编辑器中插入链接节点。
Parameters
编辑器实例。
submitFloatingLink
如果 URL 有效，则插入链接，关闭浮动链接，并聚焦编辑器。
- 如果 URL 有效则插入链接。
- 如果文本为空则使用 URL 作为文本。
- 关闭浮动链接。
- 聚焦编辑器。
Parameters
编辑器实例。
Returns
如果链接插入成功则返回 true。
triggerFloatingLink
触发浮动链接。
Parameters
编辑器实例。
triggerFloatingLinkEdit
触发浮动链接编辑。
Parameters
编辑器实例。
Returns
如果链接编辑成功则返回 true。
triggerFloatingLinkInsert
触发浮动链接。
以下情况不会触发：
- 选区跨越多个块。
- 选区包含多个叶子节点。
- 最低层选区不是文本。
- 选区包含链接节点。
Parameters
编辑器实例。
Returns
true。unwrapLink
解除链接节点的包装。
Parameters
编辑器实例。
upsertLink
如果选区在链接中或选区不是 URL：
- 如果
insertTextInLink为true，在链接中插入url作为文本并退出。 - 否则，如果
text已定义且为空，将其设置为url。 - 如果
skipValidation为false（默认），使用validateUrl函数验证url。如果验证失败，则退出。
如果选区已展开或在链接中 update 选项设置为 true：
- 移除链接节点并获取链接文本。
然后：
- 插入带有更新后的
url和target的链接节点。 - 如果
text已定义且不为空，用新的text替换链接文本。
Parameters
编辑器实例。
Returns
如果链接插入或更新成功则返回 true。
upsertLinkText
如果文本与链接上方的文本不同，则用新的文本节点替换链接的子节点。新的文本节点具有与链接中第一个文本节点相同的标记。
Parameters
编辑器实例。
validateUrl
根据插件选项验证 URL。
Parameters
编辑器实例。
要验证的 URL。
Returns
true。wrapLink
使用拆分包装链接节点。
Parameters
编辑器实例。
CreateLinkNodeOptions
Attributes
正在创建的链接节点的 URL。
链接节点显示的文本。这是用户看到和点击的文本。如果未提供，则使用 URL 作为显示文本。
指定在何处打开 URL。可以是 _blank（新标签页）、_self（同一框架）、_parent（父框架）或 _top（窗口的整个主体）。
表示链接节点子节点的 TText 对象数组。这些子节点显示为链接节点的内容。
API 组件
FloatingLinkNewTabInput
链接新标签页的输入框。
State
链接是否应在新标签页中打开。
输入元素的引用。
设置选中状态。
FloatingLinkUrlInput
链接 URL 的输入框。
State
输入元素的引用。
LinkOpenButton
打开链接的按钮。
State
要打开的链接元素。
useFloatingLinkEdit
浮动链接编辑的行为钩子。
State
虚拟浮动返回的对象。
Returns
useFloatingLinkEnter
监听 Enter 键按下事件并在编辑器中提交浮动链接。
useFloatingLinkEscape
监听 Escape 键按下事件并处理编辑器中浮动链接的行为。
useFloatingLinkInsert
插入链接的行为钩子。
State
虚拟浮动返回的对象。
浮动元素的引用。
Returns
浮动元素的引用。
Props
useFloatingLinkStore
浮动链接的存储。
State
具有浮动链接的编辑器的 ID。
鼠标是否按下。
浮动链接是否已更新。
浮动链接的 URL。
浮动链接的文本。
浮动链接是否应在新标签页中打开。
浮动链接的模式。
浮动链接是否正在编辑。
useLink
链接元素的行为钩子。
Parameters
Returns
useLinkToolbarButton
链接工具栏按钮的行为钩子。
State
选区是否在链接中。
Returns
useVirtualFloatingLink
管理链接虚拟浮动的自定义钩子。
Parameters
链接所属编辑器的 ID。
虚拟浮动的选项。
Returns
useVirtualFloating 钩子的返回值。