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 DocsHyperLinkUIKoKR from '@univerjs/docs-hyper-link-ui/locale/ko-KR'import '@univerjs/docs-hyper-link-ui/lib/index.css'const univer = new Univer({  locale: LocaleType.KO_KR,  locales: {    [LocaleType.KO_KR]: mergeLocales(      DocsHyperLinkUIKoKR,     ),  },})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 UniverPresetDocsCoreKoKR from '@univerjs/preset-docs-core/locales/ko-KR'import { UniverDocsHyperLinkPreset } from '@univerjs/preset-docs-hyper-link'import UniverPresetDocsHyperLinkKoKR from '@univerjs/preset-docs-hyper-link/locales/ko-KR'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.KO_KR,  locales: {    [LocaleType.KO_KR]: mergeLocales(      UniverPresetDocsCoreKoKR,      UniverPresetDocsHyperLinkKoKR,     ),  },  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.