Hyperlink
Hyperlinks are used to quickly navigate and access external web pages, email addresses, and other content in documents.
Preset Mode
Installation
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-linkUsage
TypeScript
import { UniverDocsCorePreset } from '@univerjs/preset-docs-core'import UniverPresetDocsCoreEnUS from '@univerjs/preset-docs-core/locales/en-US'import { UniverDocsHyperLinkPreset } from '@univerjs/preset-docs-hyper-link'import UniverPresetDocsHyperLinkEnUS from '@univerjs/preset-docs-hyper-link/locales/en-US'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.EN_US, locales: { [LocaleType.EN_US]: mergeLocales( UniverPresetDocsCoreEnUS, UniverPresetDocsHyperLinkEnUS, ), }, presets: [ UniverDocsCorePreset(), UniverDocsHyperLinkPreset(), ],})Plugin Mode
Installation
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-uiUsage
TypeScript
import { LocaleType, mergeLocales, Univer } from '@univerjs/core'import { UniverDocsHyperLinkPlugin } from '@univerjs/docs-hyper-link'import { UniverDocsHyperLinkUIPlugin } from '@univerjs/docs-hyper-link-ui'import DocsHyperLinkUIEnUS from '@univerjs/docs-hyper-link-ui/locale/en-US'import '@univerjs/docs-hyper-link-ui/lib/index.css'const univer = new Univer({ locale: LocaleType.EN_US, locales: { [LocaleType.EN_US]: mergeLocales( DocsHyperLinkUIEnUS, ), },})univer.registerPlugin(UniverDocsHyperLinkPlugin)univer.registerPlugin(UniverDocsHyperLinkUIPlugin)Create and edit links with the Facade API
link(text, url) appends linked text and records its range, so you do not need to calculate character offsets. Use the range id returned by getLinks() to change the destination later.
TypeScript
const richText = univerAPI .newRichText() .text('Read ') .link('Web 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')Call removeLink(link.rangeId) to remove the destination while keeping the visible text.
How is this guide?