Hipervínculo
Los hipervínculos se utilizan para navegar y acceder rápidamente a páginas web externas, direcciones de correo electrónico y otro contenido en documentos.
Modo de complemento
Instalación
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-uiUso
TypeScript
import { LocaleType, mergeLocales, Univer } from '@univerjs/core'import { UniverDocsHyperLinkPlugin } from '@univerjs/docs-hyper-link'import { UniverDocsHyperLinkUIPlugin } from '@univerjs/docs-hyper-link-ui'import DocsHyperLinkUIEsES from '@univerjs/docs-hyper-link-ui/locale/es-ES'import '@univerjs/docs-hyper-link-ui/lib/index.css'const univer = new Univer({ locale: LocaleType.ES_ES, locales: { [LocaleType.ES_ES]: mergeLocales( DocsHyperLinkUIEsES, ), },})univer.registerPlugin(UniverDocsHyperLinkPlugin)univer.registerPlugin(UniverDocsHyperLinkUIPlugin)Compatibilidad móvil
Configure primero el editor móvil. En la inicialización en modo plugin de esta página, sustituya los registros de escritorio siguientes por las exportaciones móviles de los mismos paquetes antes de abrir un documento. Conserve modelos, estilos, traducciones e importaciones Facade; no registre ambas variantes.
| Paquete | Registro de escritorio | Registro móvil |
|---|---|---|
@univerjs/docs-hyper-link-ui | UniverDocsHyperLinkUIPlugin | UniverDocsHyperLinkMobileUIPlugin |
Modo preset
Instalación
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-linkUso
TypeScript
import { UniverDocsCorePreset } from '@univerjs/preset-docs-core'import UniverPresetDocsCoreEsES from '@univerjs/preset-docs-core/locales/es-ES'import { UniverDocsHyperLinkPreset } from '@univerjs/preset-docs-hyper-link'import UniverPresetDocsHyperLinkEsES from '@univerjs/preset-docs-hyper-link/locales/es-ES'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.ES_ES, locales: { [LocaleType.ES_ES]: mergeLocales( UniverPresetDocsCoreEsES, UniverPresetDocsHyperLinkEsES, ), }, presets: [ UniverDocsCorePreset(), UniverDocsHyperLinkPreset(), ],})Crear y editar enlaces con la API Facade
link(text, url) añade texto enlazado y registra su rango, por lo que no es necesario calcular desplazamientos. Use el identificador devuelto por getLinks() para cambiar el destino más adelante.
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) elimina el destino sin borrar el texto visible.
¿Cómo es esta guía?