Web SDK

超連結

超連結用於實現文件外部網頁、電子郵件地址等內容的快速跳轉與訪問。

外掛模式

安裝

Shell
pnpm 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 DocsHyperLinkUIZhTW from '@univerjs/docs-hyper-link-ui/locale/zh-TW'import '@univerjs/docs-hyper-link-ui/lib/index.css'const univer = new Univer({  locale: LocaleType.ZH_TW,  locales: {    [LocaleType.ZH_TW]: mergeLocales(      DocsHyperLinkUIZhTW,     ),  },})univer.registerPlugin(UniverDocsHyperLinkPlugin)univer.registerPlugin(UniverDocsHyperLinkUIPlugin)

行動裝置支援

先設定行動版編輯器。在本頁外掛模式的初始化程式碼中，將下列桌面版註冊替換為同一套件匯出的行動版外掛，並在開啟文件前完成。保留模型外掛、樣式、語言套件與 Facade 匯入，請勿同時註冊兩個版本。

套件桌面版註冊行動版註冊
@univerjs/docs-hyper-link-uiUniverDocsHyperLinkUIPluginUniverDocsHyperLinkMobileUIPlugin

預設模式

安裝

Shell
pnpm add @univerjs/preset-docs-hyper-link

使用

TypeScript
import { UniverDocsCorePreset } from '@univerjs/preset-docs-core'import UniverPresetDocsCoreZhTW from '@univerjs/preset-docs-core/locales/zh-TW'import { UniverDocsHyperLinkPreset } from '@univerjs/preset-docs-hyper-link'import UniverPresetDocsHyperLinkZhTW from '@univerjs/preset-docs-hyper-link/locales/zh-TW'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_TW,  locales: {    [LocaleType.ZH_TW]: mergeLocales(      UniverPresetDocsCoreZhTW,      UniverPresetDocsHyperLinkZhTW,     ),  },  presets: [    UniverDocsCorePreset(),    UniverDocsHyperLinkPreset(),   ],})

使用 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) 可移除連結網址，同時保留顯示文字。

你覺得這篇文檔如何？

© 2026 DreamNum Co., Ltd.