Установка и основы использования

В этой главе описаны установка и основы использования Univer Slides. В руководстве используются пакеты Slides из Web SDK. Сейчас для Slides нет пресета, поэтому приложение необходимо создавать в режиме плагинов.

Если вы ещё не знакомы с основными концепциями Univer, сначала прочитайте раздел «Быстрый старт».

Univer поддерживает два способа интеграции: режим предустановок и режим плагинов. Предустановки упрощают настройку благодаря готовым наборам плагинов. Для глубокой настройки и расширения возможностей рекомендуем режим плагинов, позволяющий комбинировать и настраивать плагины по отдельности.

Настройка в режиме плагинов

Univer предоставляет Slides в виде набора плагинов. В браузерном редакторе обычно регистрируют общую среду выполнения Univer, плагин лицензии , зависимости Docs и Drawing, а затем плагины модели и интерфейса Slides.

Использование менеджера пакетов

Используйте сборщик с поддержкой ES Modules и поля exports в package.json.

Установка

Univer использует React для интерфейса и RxJS для потоков данных; его также можно встроить в Vue или Angular. Убедитесь, что peer dependencies¹ react, react-dom и rxjs установлены. Команда Yarn ниже включает их явно.

Используйте одинаковую версию всех пакетов @univerjs/* и @univerjs-pro/*.

pnpm add @univerjs/core @univerjs/design @univerjs/docs @univerjs/docs-ui @univerjs/drawing @univerjs/engine-render @univerjs/ui @univerjs-pro/license @univerjs-pro/slides @univerjs-pro/slides-ui

npm install @univerjs/core @univerjs/design @univerjs/docs @univerjs/docs-ui @univerjs/drawing @univerjs/engine-render @univerjs/ui @univerjs-pro/license @univerjs-pro/slides @univerjs-pro/slides-ui

yarn add @univerjs/core @univerjs/design @univerjs/docs @univerjs/docs-ui @univerjs/drawing @univerjs/engine-render @univerjs/ui @univerjs-pro/license @univerjs-pro/slides @univerjs-pro/slides-ui react react-dom rxjs

bun add @univerjs/core @univerjs/design @univerjs/docs @univerjs/docs-ui @univerjs/drawing @univerjs/engine-render @univerjs/ui @univerjs-pro/license @univerjs-pro/slides @univerjs-pro/slides-ui

Использование

Перед инициализацией Univer создайте контейнер и задайте ему явную высоту:

<div id="app" style="height: 600px"></div>

Перед вызовом FUniver.newAPI(univer) импортируйте точки входа facade из примера ниже. Импортируйте CSS в порядке: @univerjs/design, @univerjs/ui, затем CSS продукта.

1. Импортируйте стили, пакеты локализации и необходимые плагины:

   TypeScript

   import { UniverLicensePlugin } from '@univerjs-pro/license'import { UniverSlidesPlugin } from '@univerjs-pro/slides'import { UniverSlidesUIPlugin } from '@univerjs-pro/slides-ui'import SlidesUIEnUS from '@univerjs-pro/slides-ui/locale/en-US'import SlidesEnUS from '@univerjs-pro/slides/locale/en-US'import { LocaleType, mergeLocales, Univer, UniverInstanceType } from '@univerjs/core'import DesignEnUS from '@univerjs/design/locale/en-US'import { UniverDocsPlugin } from '@univerjs/docs'import { UniverDocsUIPlugin } from '@univerjs/docs-ui'import DocsUIEnUS from '@univerjs/docs-ui/locale/en-US'import { UniverDrawingPlugin } from '@univerjs/drawing'import { UniverRenderEnginePlugin } from '@univerjs/engine-render'import { UniverUIPlugin } from '@univerjs/ui'import UIEnUS from '@univerjs/ui/locale/en-US'import '@univerjs/design/lib/index.css'import '@univerjs/ui/lib/index.css'import '@univerjs/docs-ui/lib/index.css'import '@univerjs-pro/slides-ui/lib/index.css'

2. Если вы хотите использовать Facade API², импортируйте его точки входа:

   TypeScript

   import { FUniver } from '@univerjs/core/facade'import '@univerjs-pro/slides/facade'

3. Создайте экземпляр Univer, зарегистрируйте плагины и создайте юнит Slides:

   TypeScript

   const univer = new Univer({  locale: LocaleType.EN_US,  locales: {    [LocaleType.EN_US]: mergeLocales(      DesignEnUS,      UIEnUS,      DocsUIEnUS,      SlidesEnUS,      SlidesUIEnUS,    ),  },})univer.registerPlugin(UniverRenderEnginePlugin)univer.registerPlugin(UniverUIPlugin, {  container: 'app',})univer.registerPlugin(UniverDocsPlugin)univer.registerPlugin(UniverDocsUIPlugin)univer.registerPlugin(UniverDrawingPlugin)univer.registerPlugin(UniverLicensePlugin, {  license: process.env.CLIENT_LICENSE_TEXT,})univer.registerPlugin(UniverSlidesPlugin)univer.registerPlugin(UniverSlidesUIPlugin)univer.createUnit(UniverInstanceType.UNIVER_SLIDE, {})const univerAPI = FUniver.newAPI(univer)

   Развернуть код

Объект univerAPI, возвращаемый методом FUniver.newAPI(univer), представляет собой Facade API Univer. Используйте его для создания презентаций и вызова API Slides.

Методы univer.registerPlugin и univer.registerPlugins

Метод univer.registerPlugin используется для регистрации плагина в экземпляре Univer. После создания экземпляра Univer вызовите этот метод, чтобы зарегистрировать плагины.

Плагин можно зарегистрировать с помощью метода univer.registerPlugin(Plugin, options), где Plugin — регистрируемый плагин, а options — необязательные параметры конфигурации, которые могут различаться в зависимости от плагина.

Для одновременной регистрации нескольких плагинов передайте массив в univer.registerPlugins. Это удобно, когда требуется централизованно управлять плагинами.

univer.registerPlugins([  UniverRenderEnginePlugin,  [UniverUIPlugin, {    container: 'app',  }],  UniverDocsPlugin,  UniverDocsUIPlugin,  UniverDrawingPlugin,  [UniverLicensePlugin, {    license: process.env.CLIENT_LICENSE_TEXT,  }],  UniverSlidesPlugin,  UniverSlidesUIPlugin,])

Необязательные пакеты функций

Добавляйте пакеты функций, когда редактору требуются соответствующие возможности:

pnpm add @univerjs-pro/slides-printpnpm add @univerjs-pro/slides-table @univerjs-pro/slides-table-uipnpm add @univerjs-pro/chart-ui @univerjs-pro/slides-chart @univerjs-pro/slides-chart-uipnpm add @univerjs-pro/slides-exchange-client

Примеры регистрации функций приведены в разделах «Печать», «Таблицы», «Диаграммы» и «Импорт и экспорт».

Отложенная загрузка необязательных плагинов

В режиме плагинов можно отложить загрузку функциональных плагинов до момента, когда они действительно понадобятся продукту:

univer.createUnit(UniverInstanceType.UNIVER_SLIDE, {})import('@univerjs-pro/slides-chart').then(({ UniverSlidesChartPlugin }) => {  univer.registerPlugin(UniverSlidesChartPlugin)})

Использование на сервере

В Node.js регистрируйте плагины модели без плагинов браузерного интерфейса:

univer.registerPlugin(UniverSlidesPlugin)

Плагин модели используется для обработки снимков без интерфейса. Чтобы предоставить API совместного редактирования или преобразования файлов, подключите соответствующие модули Server SDK; регистрация одного плагина не создаёт эти сервисы.

Поддержка мобильных устройств

Для сенсорного интерфейса Univer Slides используйте мобильные UI-плагины.³ Выберите режим до создания редактора.

В примере режима плагинов выше замените следующие импорты и регистрации UI до вызова createUnit(). Не добавляйте их к уже инициализированному настольному редактору. Сохраните плагины моделей, движки, локализации, CSS и импорты Facade. Классы экспортируются под разными именами из одной точки входа пакета.

import { UniverSlidesMobileUIPlugin } from '@univerjs-pro/slides-ui'import { UniverDocsMobileUIPlugin } from '@univerjs/docs-ui'import { UniverMobileUIPlugin } from '@univerjs/ui'univer.registerPlugin(UniverMobileUIPlugin, { container: 'app' })univer.registerPlugin(UniverDocsMobileUIPlugin)univer.registerPlugin(UniverSlidesMobileUIPlugin)

Соответствие плагинов

Регистрируйте только нужные функции, сохраняя плагины моделей и зависимости. Наличие мобильного UI не означает одинаковый набор элементов управления на обеих платформах. Функциям Pro по-прежнему нужны соответствующая лицензия. Для функций, которым нужен backend, подключите соответствующие модули Univer Server SDK к своему приложению.

Контейнер и сенсорное управление

Задайте явную высоту контейнера и viewport страницы. 100dvh соответствует динамической высоте области просмотра. Проверьте прокрутку, масштабирование двумя пальцами, выделение текста, буфер обмена и экранную клавиатуру в целевых мобильных браузерах. Уменьшение ширины не включает мобильные плагины.

UniverMobileUIPlugin по умолчанию использует disableAutoFocus: true, чтобы редактор не получал фокус автоматически при инициализации.

<meta name="viewport" content="width=device-width, initial-scale=1" /><div id="app" style="height: 100dvh"></div>

Другие каналы выпуска

Помимо стабильных выпусков, Univer предлагает каналы alpha / beta и nightly. Они позволяют заранее получить доступ к новейшим функциям, которые еще не выпущены официально. Однако вместе с новыми возможностями возрастают и риски: такие версии могут содержать ошибки, неполные или нестабильные функции. По возможности не используйте их в рабочей среде.

Выпуски Alpha / Beta

После завершения работы над новой функцией или существенным изменением команда разработчиков Univer может предварительно опубликовать их в канале alpha или beta. Установить alpha- или beta-версию пакета Univer можно следующей командой:

pnpm add @univerjs-pro/slides@alpha # Alpha version
pnpm add @univerjs-pro/slides@beta # Beta version

npm install @univerjs-pro/slides@alpha # Alpha version
npm install @univerjs-pro/slides@beta # Beta version

yarn add @univerjs-pro/slides@alpha # Alpha version
yarn add @univerjs-pro/slides@beta # Beta version

bun add @univerjs-pro/slides@alpha # Alpha version
bun add @univerjs-pro/slides@beta # Beta version

Если при использовании alpha- или beta-версий вы обнаружите проблему или захотите поделиться отзывом, сообщите об этом команде разработчиков Univer через GitHub Issues.

Мы будем рады вашим отзывам о предварительных выпусках.

Что дальше

• Узнайте, как использовать Facade API.
• Настройка лицензии
• Интеграция Server SDK
• Добавьте нужные функциональные плагины из раздела «Функции».