Lien hypertexte
Les liens hypertextes permettent d’accéder rapidement à des pages web externes, des adresses e-mail et d’autres contenus depuis un document.
Mode plugin
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-uiUtilisation
TypeScript
import { LocaleType, mergeLocales, Univer } from '@univerjs/core'import { UniverDocsHyperLinkPlugin } from '@univerjs/docs-hyper-link'import { UniverDocsHyperLinkUIPlugin } from '@univerjs/docs-hyper-link-ui'import DocsHyperLinkUIFrFR from '@univerjs/docs-hyper-link-ui/locale/fr-FR'import '@univerjs/docs-hyper-link-ui/lib/index.css'const univer = new Univer({ locale: LocaleType.FR_FR, locales: { [LocaleType.FR_FR]: mergeLocales( DocsHyperLinkUIFrFR, ), },})univer.registerPlugin(UniverDocsHyperLinkPlugin)univer.registerPlugin(UniverDocsHyperLinkUIPlugin)Prise en charge mobile
Configurez d’abord l’éditeur mobile. Dans l’initialisation en mode plugin de cette page, remplacez les inscriptions de bureau ci-dessous par les exports mobiles des mêmes paquets avant d’ouvrir un document. Conservez modèles, styles, traductions et imports Facade ; n’enregistrez pas les deux variantes.
| Paquet | Inscription de bureau | Inscription mobile |
|---|---|---|
@univerjs/docs-hyper-link-ui | UniverDocsHyperLinkUIPlugin | UniverDocsHyperLinkMobileUIPlugin |
Mode preset
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-linkUtilisation
TypeScript
import { UniverDocsCorePreset } from '@univerjs/preset-docs-core'import UniverPresetDocsCoreFrFR from '@univerjs/preset-docs-core/locales/fr-FR'import { UniverDocsHyperLinkPreset } from '@univerjs/preset-docs-hyper-link'import UniverPresetDocsHyperLinkFrFR from '@univerjs/preset-docs-hyper-link/locales/fr-FR'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.FR_FR, locales: { [LocaleType.FR_FR]: mergeLocales( UniverPresetDocsCoreFrFR, UniverPresetDocsHyperLinkFrFR, ), }, presets: [ UniverDocsCorePreset(), UniverDocsHyperLinkPreset(), ],})Créer et modifier des liens avec l’API Facade
link(text, url) ajoute un texte lié et mémorise sa plage, sans calcul manuel des positions. Utilisez l’identifiant renvoyé par getLinks() pour modifier ensuite la destination.
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) supprime la destination tout en conservant le texte visible.
Que pensez-vous de ce guide ?