超链接
超链接用于实现文档外部网页、电子邮件地址等内容的快速跳转与访问。
预设模式
安装
Shell
pnpm add @univerjs/preset-docs-hyper-linkShell
npm install @univerjs/preset-docs-hyper-linkShell
yarn add @univerjs/preset-docs-hyper-linkShell
bun add @univerjs/preset-docs-hyper-link使用
TypeScript
import { UniverDocsCorePreset } from '@univerjs/preset-docs-core'import UniverPresetDocsCoreZhCN from '@univerjs/preset-docs-core/locales/zh-CN'import { UniverDocsHyperLinkPreset } from '@univerjs/preset-docs-hyper-link'import UniverPresetDocsHyperLinkZhCN from '@univerjs/preset-docs-hyper-link/locales/zh-CN'import { createUniver, LocaleType, mergeLocales } from '@univerjs/presets'import '@univerjs/preset-docs-core/lib/index.css'import '@univerjs/preset-docs-hyper-link/lib/index.css'const { univerAPI } = createUniver({ locale: LocaleType.ZH_CN, locales: { [LocaleType.ZH_CN]: mergeLocales( UniverPresetDocsCoreZhCN, UniverPresetDocsHyperLinkZhCN, ), }, presets: [ UniverDocsCorePreset(), UniverDocsHyperLinkPreset(), ],})插件模式
安装
Shell
pnpm add @univerjs/docs-hyper-link @univerjs/docs-hyper-link-uiShell
npm install @univerjs/docs-hyper-link @univerjs/docs-hyper-link-uiShell
yarn add @univerjs/docs-hyper-link @univerjs/docs-hyper-link-uiShell
bun add @univerjs/docs-hyper-link @univerjs/docs-hyper-link-ui使用
TypeScript
import { LocaleType, mergeLocales, Univer } from '@univerjs/core'import { UniverDocsHyperLinkPlugin } from '@univerjs/docs-hyper-link'import { UniverDocsHyperLinkUIPlugin } from '@univerjs/docs-hyper-link-ui'import DocsHyperLinkUIZhCN from '@univerjs/docs-hyper-link-ui/locale/zh-CN'import '@univerjs/docs-hyper-link-ui/lib/index.css'const univer = new Univer({ locale: LocaleType.ZH_CN, locales: { [LocaleType.ZH_CN]: mergeLocales( DocsHyperLinkUIZhCN, ), },})univer.registerPlugin(UniverDocsHyperLinkPlugin)univer.registerPlugin(UniverDocsHyperLinkUIPlugin)使用 Facade API 创建和编辑链接
link(text, url) 会追加链接文本并记录对应范围，无需手动计算字符位置。后续修改链接地址时，使用 getLinks() 返回的范围 ID。
TypeScript
const richText = univerAPI .newRichText() .text('Read ') .link('Univer Office SDK documentation', 'https://docs.univer.ai') .text(' for details.')const [link] = richText.getLinks()if (!link) throw new Error('Link was not created')richText.updateLink(link.rangeId, 'https://docs.univer.ai/guides')调用 removeLink(link.rangeId) 可移除链接地址，同时保留可见文本。
你觉得这篇文档如何？