Web SDK

ハイパーリンク

ハイパーリンクを使うと、ドキュメント内から外部 Web ページやメールアドレスなどへ素早くアクセスできます。

プラグインモード

インストール

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 DocsHyperLinkUIJaJP from '@univerjs/docs-hyper-link-ui/locale/ja-JP'import '@univerjs/docs-hyper-link-ui/lib/index.css'const univer = new Univer({  locale: LocaleType.JA_JP,  locales: {    [LocaleType.JA_JP]: mergeLocales(      DocsHyperLinkUIJaJP,     ),  },})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 UniverPresetDocsCoreJaJP from '@univerjs/preset-docs-core/locales/ja-JP'import { UniverDocsHyperLinkPreset } from '@univerjs/preset-docs-hyper-link'import UniverPresetDocsHyperLinkJaJP from '@univerjs/preset-docs-hyper-link/locales/ja-JP'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.JA_JP,  locales: {    [LocaleType.JA_JP]: mergeLocales(      UniverPresetDocsCoreJaJP,      UniverPresetDocsHyperLinkJaJP,     ),  },  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.