Hyperlink
Hyperlinks are used to quickly navigate and access external web pages, email addresses, and other content in documents.
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)Mobile support
First configure the mobile editor. In this page’s plugin-mode setup, replace the desktop registrations below with their mobile exports from the same packages, before opening a document. Keep the model plugins, styles, locales and Facade imports; do not register both variants.
| Package | Desktop registration | Mobile registration |
|---|---|---|
@univerjs/docs-hyper-link-ui | UniverDocsHyperLinkUIPlugin | UniverDocsHyperLinkMobileUIPlugin |
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(), ],})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('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')Call removeLink(link.rangeId) to remove the destination while keeping the visible text.
How is this guide?