@docs.plus/extension-超链接

Tiptap 有可选的预建弹出器的超链接标记,用于创建,预览和编辑链接.

它取代了 @tiptap/extension-link 标记起动Kit v3 捆绑.

为什么用它

• 自动链接覆盖的不只是网络URL. 当您输入时, 空域得到 https://,电子邮件变为 mailto:E.164 电话变成 tel:应用计划来自47个目录,例如: whatsapp://自动连接.
• 链接UI包含在内. 预建创建,预览,并编辑带有软件包的弹出船. Mod-k 打开没有配置的创建-链接格式。 在一个链接, Mod-k 当 popovers.previewHyperlink 已经设定,以及 Alt-Enter 打开链接。 单击模式打开新标签中的链接。 每个打开处都会使用新的标签,直到设置 navigate 选项. @tiptap/extension-link 绑定没有键盘快捷键 .
• 每个边界检查计划. isSafeHref 块 javascript:, (中文(简体) ), data:, (中文(简体) ), vbscript:, (中文(简体) ), file:,以及 blob: 分析、导入、写入、序列化和导航。 嵌入式标签或新行无法从门中隐藏一个方案 .
•  @tiptap/extension-link 配置端口结束 . isAllowedUri 一样 (uri, ctx) 形状为 @tiptap/extension-link,所以一项现行政策没有改变. setLink, (中文(简体) ), unsetLink,以及 toggleLink 留作别名. [label](url) 绕行方式 @tiptap/markdown。 。 。 .

安装

npm install @docs.plus/extension-hyperlink

或使用 pnpm add @docs.plus/extension-hyperlink, (中文(简体) ), yarn add @docs.plus/extension-hyperlink,或 bun add @docs.plus/extension-hyperlink。 。 。 .

要求数 @tiptap/core ^3.32.2 (中文(简体) ) 财务报告和审定财务报表 @tiptap/pm ^3.32.2 (中文(简体) )未支持3.32.2前的 Tiptap 3 发布.

此套件不导入 React, Vue, 或 Next. js 代码 。 使用从平版,Vite,React,Vue,Svelte,Next.js,Nuxt,或SvelteKit. 在浏览器中创建编辑器 .

反应原生没有DOM. 在网页视图中装入编辑器 .

安装两个运行时间依赖, @floating-ui/dom 财务报告和审定财务报表 linkifyjs。里面的弹出式引擎和工具提示船 dist,因此它们没有添加第三包.

升级自 2.2没有删除导出或选项, 并存储 JSON 和 Yjs 文件装入 。 一些行为有所改变,例如Mod-click, Mod-k 在链接和两个 HTML 解析规则中。 见 从2.2移至2.3。 。 。 .

升级自 1.x选项名称、命令名称和 CSS 类名称都更改了 从 1.x 移动。 。 。 .

快速启动

先在浏览器中运行此快速启动, 无需安装 。 应用程序住在 examples/vanilla。 。 。 .

主机页面需要一个挂载点 : <div id="editor"></div>。片段也导入 @tiptap/starter-kit添加时 npm install @tiptap/starter-kit 当你的应用程序还没有.

import { Editor } from '@tiptap/core'
import StarterKit from '@tiptap/starter-kit'
import {
  Hyperlink,
  createHyperlinkPopover,
  editHyperlinkPopover,
  previewHyperlinkPopover
} from '@docs.plus/extension-hyperlink'
import '@docs.plus/extension-hyperlink/styles.css'

const editor = new Editor({
  element: document.querySelector('#editor'),
  content: '<p>Try <a href="https://example.com">this link</a>.</p>',
  extensions: [
    // Disable StarterKit's bundled link mark — see Caveats.
    StarterKit.configure({ link: false }),
    Hyperlink.configure({
      popovers: {
        previewHyperlink: previewHyperlinkPopover,
        editHyperlink: editHyperlinkPopover,
        createHyperlink: createHyperlinkPopover
      }
    })
  ]
})

这个 styles.css 导入是可选的。 没有它, 预建的弹出会变形, 每一个弹出会没有淡出, 片段也样式为无文档链接 – 见 过量 财务报告和审定财务报表 样式文档链接。 。 。 .

您应该看到一个有链接的段落 。 点击链接打开预览弹出, 并带有副本、 编辑和删除动作 。 类型 example.org 和一个空格,文本成为链接。 选择一个单词并按 Mod-k (Cmd on macOS, Ctrl others)来打开创建-链接表.

要显示指针位于链接上的卡片,请添加 hovercard 选项。 见 悬浮时显示牌。 。 。 .

洞穴

• StarterKit.configure({ link: false }) 是需要的,而不是结构上的. 启动Kit v3 捆绑 @tiptap/extension-link 默认。 两分相撞 setLink 编号 : unsetLink 编号 : toggleLink 命令名称。  extensions 然后决定每个命令的标记顺序,而不设警告。 如果您只保留了装入存储的链接 link 标记、 解析和粘贴的 HTML 仍然给出 hyperlink。这个包裹 a[href] 规则运行于优先级51,高于Link的默认值50.
• 点击链接,以及 Mod-k 在链接中,需要 popovers.previewHyperlink。 。 。 . 三个开口的人, openPreviewHyperlink, (中文(简体) ), openEditHyperlink 财务报告和审定财务报表 openCreateHyperlink,回到预建的工厂 当一个槽是 null。单击处理器和 Mod-k 别 离开 previewHyperlink 时间 null,点击链接即可打开不跳出. Mod-k 在一个链接中,然后什么都不做,它永远不会打开 创建的形式在那里.
• linkOnPaste: false 并不阻止每个粘贴连接. 链接粘贴规则保留注册,所以被粘贴的赤裸的URL仍然成为链接. 为了阻止那条路,准备 shouldAutoLink: () => false,每个自动链接路径都会参考.
• HTMLAttributes.target 到达DOM. HTMLAttributes: { target: '_blank' } 发送 <a target="_blank">。浏览器驱动 target="_blank" 导航跳过点击门。 离开 target 时间 null 并让点击处理器打开链接.
• Markdown 只保留链接 href。 。 。 . 导出写入 [text](href),然后导入仅读取href,所以链接 title 双向丢失。 习惯 rel 也丢失,导入设置默认值 rel。 。 。 . target, (中文(简体) ), class 财务报告和审定财务报表 image 设计上永远无法到达Markdown.
• 链接图标需要 CSS 用于 .hyperlink-icon。 。 。 . 无 styles.css 或您自己的规则,图标显示的自然大小. styles.css 仅在内部大小 .ProseMirror图标 linkIconFor 编辑需要自己的规则 没有这样的规则, 尾风主机 也打破了线, 因为飞行前设置 img 财务报告和审定财务报表 svg 改为 display: block编辑 styles.css 规则胜过飞行前 .ProseMirror。 。 。 .
• linkIcon 必须返回没有文本的新元素. null 给出一个没有出错的纯链接。 任何其它结果,或抛出,都会给出一个简单的链接和一个控制台错误 linkIcon 函数.
• 上面的宿主标记 priority: 1000 将一个链接分为两个图标. 那个标记在链接之外 当它覆盖一个链接的一部分 <a> 分为两部分,每个部分都有一个图标.
• Hyperlink.extend({ addMarkView }) 替换图标标记视图. 为了保持图标,呼叫 this.parent?.() 并完成它的结果.
• 遗产 link 标记没有图标. 只有 hyperlink 标记通过图标标记视图制作.
• 解析出 HTML 时速 .hyperlink-icon 键. 规则甚至与 linkIcon 未设定, 因此含有该类元素的内容会在负载和粘贴上丢失 .
• A 类 { light, dark } 配对有限度. 这需要 styles.css 或属于自己的 .hyperlink-icon 大小,或宽度为零。 错误的 URL 显示一个空白的 1em 框 。 浏览器在Chrome 150,Firefox 150和Safari 27前显示光线图像.
• 一个瞬态图像失败隐藏了该图标直到重新装入. 这对一个 <img> 图标 linkIconFetcher 或来自图像 URL 条目 linkIconMap。每个帮助者再也不会请求失败的 URL ,直到页面重新装入或新建帮助器。 A 类 { light, dark } 配对没有这样的列表.
• 一个已经停留在链接上的指针没有悬牌. 牌只开始 pointerover。当链接在静态指针下产生时,在指针离开链接并返回之前,不显示卡片.
• 悬牌只看到这包的花花. 它不会在预览、创建或编辑此软件包的弹出时打开卡片 。 一个来自另一捆,例如 @docs.plus/extension-hypermultimedia,没有停止它.

完整名单 以及每个名单的原因 洞穴。 。 。 .

共同任务

从自己的按钮设置链接

每个指挥部都登陆 editor.commands 继续 editor.chain()打开 editor.commands,每个返回 boolean,以及 false 标记为无.

editor.chain().focus().setHyperlink({ href: 'https://example.com' }).run()
editor.getAttributes('hyperlink').href // read the current href

setHyperlink 返回时 false 何时 href 空的, 当 编成的大门 拒绝它,或者当 计划不能应用标记在那里。 见 图标 完整名单.

打开创建链接格式

在连接之外, Mod-k 调用这个命令。 从您的工具栏按钮中调用 :

editor.commands.openCreateHyperlinkPopover()

openCreateHyperlinkPopover 打开UI,所以 editor.can().openCreateHyperlinkPopover() 报告可用性时不增加任何内容。 无所选择,预建的窗体会将打入的URL作为自己的链接文本.

样式文档链接

这个 styles.css 样式表对弹出式和悬牌工具提示进行外观。 标记是平地 <a> 没有类,所以请将文档链接到自己:

Hyperlink.configure({ HTMLAttributes: { class: 'my-link' } })

a.my-link {
  color: #2563eb;
  text-decoration: underline;
}

主题符号、 暗模式和类名请见 样式。 。 。 .

每个链接前显示图标

linkIcon 使用同步函数。 它接收 { href } 返回新元素,或 null 用于纯链接:

Hyperlink.configure({
  linkIcon: ({ href }) => {
    const icon = document.createElement('span')
    icon.style.background = href.startsWith('https:') ? '#16a34a' : '#9ca3af'
    return icon
  }
})

图标先放进去 <a>,链接文本坐落在 <span> 后结. 只是一个经过的猎人 isSafeHref 到达函数. validate 财务报告和审定财务报表 isAllowedUri 不运行图标. styles.css 图标大小为 1em。见 选项。 。 。 .

两个帮手为你建立了这个功能. linkIconMap 是一个从域到图标的离线表格. linkIconFetcher 新建一个 <img> 每一个链接,例如通过您自己的favicon路径。 锁上 ??,所以一个被击中的地图获胜,而取取取器的帮助者从不运行它:

import { Hyperlink, linkIconFetcher, linkIconMap } from '@docs.plus/extension-hyperlink'

const icons = linkIconMap({ 'example.com': '/icons/example.svg' })
const favicons = linkIconFetcher({
  src: (origin) => `/favicon?origin=${encodeURIComponent(origin)}`
})
Hyperlink.configure({ linkIcon: (ctx) => icons(ctx) ?? favicons(ctx) })

linkIconFetcher 选择两个选项: src 财务报告和审定财务报表 tile。 。 。 . src 获得链接的来源,例如 https://example.com 或者说 https://example.com:8080没有道路,没有后盾。 它必须返回图像 URL 字符串 。 您的路由可能用浏览器所能绘制的任何图像来回答 。 若为 src 扔出,链接保持平整,包记录一个控制台出错。 共享图标 URL 的链接共享一个请求 。 每个 <img> 已经 alt="",一个16×16回落大小和 referrerPolicy="no-referrer"。它会隐藏到加载时,所以失败的加载不会显示图标 。 要跳过链接, 请将获取器包入返回的函数 null。 。 。 . tile: true 在暗色上每个图标后画出一个光正方形 color-scheme。在轻轨上,瓦片是清晰的. linkIconMap 密钥为空主机名 : www. ,一个子域匹配其父密钥,而href端口不计数。 两个帮手都负责 http: 财务报告和审定财务报表 https: 链接。 A 类 mailto:, (中文(简体) ), tel: 或应用链接没有网络来源, 因此每个助手返回 null 对于它。 当每个函数在 ?? 链式返回 null,链接保持不变。 要给这些链接一个图标, 链条您自己的功能, 读取 href。 。 。 .

这个 favicons 函数上方也作为悬牌 siteIcon。地图条目也可能是 { light, dark } 组合图像 URL,或返回元素的函数。 见 链接图标。 。 。 .

悬浮时显示牌

这个 hovercard 当鼠标指针停留在链接上时,选项会显示卡。  fetchMetadata 返回标题、描述和图片,软件包不自行提出请求:

import { Hyperlink } from '@docs.plus/extension-hyperlink'
import '@docs.plus/extension-hyperlink/hovercard.css'
import '@docs.plus/extension-hyperlink/styles.css' // the card's tooltips

Hyperlink.configure({
  hovercard: {
    fetchMetadata: async ({ href }) => {
      const res = await fetch(`/metadata?url=${encodeURIComponent(href)}`)
      if (!res.ok) return null
      const page = await res.json()
      // Map your server's fields to HovercardData. `image` is `{ url }`, not a string.
      return {
        title: page.title,
        description: page.description,
        image: page.image ? { url: page.image } : undefined
      }
    }
  }
})

内置卡片显示图片,标题,描述和与Copy链接的链接行. 在文本为自有URL的可编辑链接上,行还显示使用页面标题. 要画自己的名片,请添加 render。见 通行证 数据合同, render时间和钥匙.

在页后指定粘贴的链接

这个 pasteTitle 选项将粘贴的赤色 URL 交换到页面标题。 链接同时与 URL 和您的 fetchTitle 返回标题 :

import { Hyperlink } from '@docs.plus/extension-hyperlink'

Hyperlink.configure({
  pasteTitle: {
    fetchTitle: async ({ href, signal }) => {
      const res = await fetch(`/metadata?url=${encodeURIComponent(href)}`, { signal })
      if (!res.ok) return null
      const data = await res.json()
      return typeof data.title === 'string' ? data.title : null
    }
  }
})

互换是它自己的倒置步骤 所以 Mod-z 恢复 URL. Mod-Shift-v 粘贴原始 URL,以及 shouldFetch 可遵循用户设置。 在 4 s 中没有答案时, URL 保留 。 见 粘贴标题 对于规则, 标题清理 和一个安全的后端.

图片库

预建创建、预览和编辑弹出器(styles.css + 键 popovers )和内置悬牌(hovercard.css + 键 hovercard 选项)。 每个截图都有光和暗版本,并遵循您的系统偏好.

文档

部分文献. 加号

此扩展由 : 文件外加.docs.plus是一个免费的实时协作工具,让社区分级组织知识,每个标题都有聊天线索. docs.plus在生产过程中从源头运行这些包,所以在达到npm之前,每个放出都会在那里被行使.

• 网站: 文件外加
• 读取项目 : 文件加/文件加
• 兄弟姐妹的延长和建议配对: 扩展/README.md

捐款

虫子报告和公关欢迎。 设置,测试命令, 和操场的绳子 住在 捐款额。 。 。 .

许可证

麻省理工学院——见 自由主义。 。 。 .