Гиперссылка
Гиперссылки позволяют быстро переходить из документа на внешние веб-страницы, открывать адреса электронной почты и обращаться к другим материалам.
Режим плагина
Установка
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-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 DocsHyperLinkUIRuRU from '@univerjs/docs-hyper-link-ui/locale/ru-RU'import '@univerjs/docs-hyper-link-ui/lib/index.css'const univer = new Univer({ locale: LocaleType.RU_RU, locales: { [LocaleType.RU_RU]: mergeLocales( DocsHyperLinkUIRuRU, ), },})univer.registerPlugin(UniverDocsHyperLinkPlugin)univer.registerPlugin(UniverDocsHyperLinkUIPlugin)Поддержка мобильных устройств
Сначала настройте мобильный редактор. В коде инициализации режима плагинов на этой странице замените указанные настольные регистрации мобильными экспортами тех же пакетов до открытия документа. Сохраните модели, стили, локализации и импорты Facade; не регистрируйте оба варианта.
| Пакет | Настольная регистрация | Мобильная регистрация |
|---|---|---|
@univerjs/docs-hyper-link-ui | UniverDocsHyperLinkUIPlugin | UniverDocsHyperLinkMobileUIPlugin |
Режим предустановки
Установка
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-linkИспользование
TypeScript
import { UniverDocsCorePreset } from '@univerjs/preset-docs-core'import UniverPresetDocsCoreRuRU from '@univerjs/preset-docs-core/locales/ru-RU'import { UniverDocsHyperLinkPreset } from '@univerjs/preset-docs-hyper-link'import UniverPresetDocsHyperLinkRuRU from '@univerjs/preset-docs-hyper-link/locales/ru-RU'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.RU_RU, locales: { [LocaleType.RU_RU]: mergeLocales( UniverPresetDocsCoreRuRU, UniverPresetDocsHyperLinkRuRU, ), }, presets: [ UniverDocsCorePreset(), UniverDocsHyperLinkPreset(), ],})Создание и редактирование ссылок через Facade API
link(text, url) добавляет текст ссылки и запоминает его диапазон, поэтому вычислять позиции символов вручную не нужно. Чтобы позднее изменить адрес, используйте идентификатор диапазона из getLinks().
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) удаляет адрес ссылки, сохраняя видимый текст.
Насколько полезно это руководство?