# Установка и основы использования - Human documentation: [https://docs.univer.ai/ru-RU/guides/boards/getting-started/installation](https://docs.univer.ai/ru-RU/guides/boards/getting-started/installation) - Agent Markdown: [https://docs.univer.ai/ru-RU/guides/boards/getting-started/installation.md](https://docs.univer.ai/ru-RU/guides/boards/getting-started/installation.md) - Requested language: `ru-RU` - Content language: `ru-RU` - Documentation version: `1.2.0` - Source: [boards/getting-started/installation/index.ru-RU.mdx](https://github.com/dream-num/documentation/blob/dev/content/guides/boards/getting-started/installation/index.ru-RU.mdx) --- В этой главе описаны установка и основы использования Univer Boards. Boards распространяется как продукт Univer Office SDK и в настоящее время работает в режиме плагинов. Если вы не знакомы с основными концепциями Univer, сначала прочитайте [краткое руководство](https://docs.univer.ai/ru-RU/guides/boards/getting-started/quickstart.md). Univer поддерживает два способа интеграции: *режим предустановок* и *режим плагинов*. Предустановки упрощают настройку благодаря готовым наборам плагинов. Для **глубокой настройки и расширения возможностей** рекомендуем режим плагинов, позволяющий комбинировать и настраивать плагины по отдельности. ## Настройка в режиме плагинов Univer предоставляет Boards в виде набора плагинов. В браузерном редакторе обычно регистрируют общую среду выполнения Univer, плагин лицензии , зависимости для документов и рисования, а затем плагины модели доски и пользовательского интерфейса. ### Использование менеджера пакетов Используйте сборщик с поддержкой ES Modules и поля `exports` в `package.json`. #### Установка Univer использует React для интерфейса и RxJS для потоков данных; его также можно встроить в Vue или Angular. Убедитесь, что peer dependencies[^peer-dependency] `react`, `react-dom` и `rxjs` установлены. Команда Yarn ниже включает их явно. Используйте **одинаковую версию** всех пакетов `@univerjs/*` и `@univerjs-pro/*`. #### pnpm ```shell pnpm add @univerjs/core @univerjs/design @univerjs/docs @univerjs/docs-ui @univerjs/drawing @univerjs/drawing-ui @univerjs/engine-render @univerjs/ui @univerjs-pro/license @univerjs-pro/ink-ui @univerjs-pro/shape-editor-ui @univerjs-pro/boards @univerjs-pro/boards-ui ``` #### npm ```shell npm install @univerjs/core @univerjs/design @univerjs/docs @univerjs/docs-ui @univerjs/drawing @univerjs/drawing-ui @univerjs/engine-render @univerjs/ui @univerjs-pro/license @univerjs-pro/ink-ui @univerjs-pro/shape-editor-ui @univerjs-pro/boards @univerjs-pro/boards-ui ``` #### yarn ```shell yarn add @univerjs/core @univerjs/design @univerjs/docs @univerjs/docs-ui @univerjs/drawing @univerjs/drawing-ui @univerjs/engine-render @univerjs/ui @univerjs-pro/license @univerjs-pro/ink-ui @univerjs-pro/shape-editor-ui @univerjs-pro/boards @univerjs-pro/boards-ui react react-dom rxjs ``` #### bun ```shell bun add @univerjs/core @univerjs/design @univerjs/docs @univerjs/docs-ui @univerjs/drawing @univerjs/drawing-ui @univerjs/engine-render @univerjs/ui @univerjs-pro/license @univerjs-pro/ink-ui @univerjs-pro/shape-editor-ui @univerjs-pro/boards @univerjs-pro/boards-ui ``` #### Использование Перед инициализацией Univer создайте контейнер и задайте ему явную высоту: ```html
``` Перед вызовом `FUniver.newAPI(univer)` импортируйте точки входа facade из примера ниже. Импортируйте CSS в порядке: `@univerjs/design`, `@univerjs/ui`, затем CSS продукта. > [!WARNING: Внимание] > * Зарегистрируйте `UniverLicensePlugin` перед плагинами доски. > * Импортируйте общий CSS пользовательского интерфейса перед CSS пользовательского интерфейса продукта. > * Зарегистрируйте плагины дополнительных элементов перед открытием снимков состояния, содержащих элементы этих типов. > * `UniverBoardsUIPlugin` автоматически загружает `UniverProFormulaEnginePlugin` для работы с фигурами. Если в том же экземпляре `Univer` также регистрируется `UniverFormulaEnginePlugin`, установите `@univerjs-pro/engine-formula` и замените импорт и регистрацию обычного движка на `UniverProFormulaEnginePlugin` в коде инициализации. Не регистрируйте оба движка формул. 1. Импортируйте стили, пакеты локализации и необходимые плагины: ```ts import { UniverBoardsPlugin } from '@univerjs-pro/boards' import { UniverBoardsUIPlugin } from '@univerjs-pro/boards-ui' import BoardsUIEnUS from '@univerjs-pro/boards-ui/locale/en-US' import { UniverInkUIPlugin } from '@univerjs-pro/ink-ui' import InkUIEnUS from '@univerjs-pro/ink-ui/locale/en-US' import { UniverLicensePlugin } from '@univerjs-pro/license' 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 { UniverDrawingUIPlugin } from '@univerjs/drawing-ui' import DrawingUIEnUS from '@univerjs/drawing-ui/locale/en-US' 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/drawing-ui/lib/index.css' import '@univerjs-pro/ink-ui/lib/index.css' import '@univerjs-pro/boards-ui/lib/index.css' ``` 1. Если вы хотите использовать Facade API[^facade-entry], импортируйте его точку входа: ```ts import { FUniver } from '@univerjs/core/facade' import '@univerjs-pro/boards/facade' ``` 1. Создайте экземпляр Univer, зарегистрируйте плагины и создайте доску: ```ts const univer = new Univer({ locale: LocaleType.EN_US, locales: { [LocaleType.EN_US]: mergeLocales( DesignEnUS, UIEnUS, DocsUIEnUS, DrawingUIEnUS, InkUIEnUS, BoardsUIEnUS, ), }, }) univer.registerPlugin(UniverRenderEnginePlugin) univer.registerPlugin(UniverUIPlugin, { container: 'app' }) univer.registerPlugin(UniverDocsPlugin) univer.registerPlugin(UniverDocsUIPlugin) univer.registerPlugin(UniverDrawingPlugin) univer.registerPlugin(UniverDrawingUIPlugin) univer.registerPlugin(UniverInkUIPlugin) univer.registerPlugin(UniverLicensePlugin, { license: process.env.CLIENT_LICENSE_TEXT, }) univer.registerPlugin(UniverBoardsPlugin) univer.registerPlugin(UniverBoardsUIPlugin) univer.createUnit(UniverInstanceType.UNIVER_BOARD, {}) const univerAPI = FUniver.newAPI(univer) ``` #### Методы `univer.registerPlugin` и `univer.registerPlugins` Метод `univer.registerPlugin` используется для регистрации плагина в экземпляре Univer. После создания экземпляра Univer вызовите этот метод, чтобы зарегистрировать плагины. Плагин можно зарегистрировать с помощью метода `univer.registerPlugin(Plugin, options)`, где `Plugin` — регистрируемый плагин, а `options` — необязательные параметры конфигурации, которые могут различаться в зависимости от плагина. Для одновременной регистрации нескольких плагинов передайте массив в `univer.registerPlugins`. Это удобно, когда требуется централизованно управлять плагинами. ```typescript univer.registerPlugins([ UniverRenderEnginePlugin, [UniverUIPlugin, { container: 'app' }], UniverDocsPlugin, UniverDocsUIPlugin, UniverDrawingPlugin, UniverDrawingUIPlugin, UniverInkUIPlugin, [UniverLicensePlugin, { license: process.env.CLIENT_LICENSE_TEXT, }], UniverBoardsPlugin, UniverBoardsUIPlugin, ]) ``` Объект `univerAPI`, возвращаемый методом `FUniver.newAPI(univer)`, представляет собой Facade API Univer. Используйте его для создания досок и работы с их элементами. ## Поддержка мобильных устройств > [!WARNING] > Для примеров нужны пакеты SDK, экспортирующие перечисленные мобильные плагины. Все зависимости `@univerjs/*` и `@univerjs-pro/*` должны иметь **одинаковую версию**. > > `1.0.0-rc.0` не экспортирует `UniverBoardsMobileUIPlugin`. Для этого примера используйте сборку, содержащую соответствующую мобильную точку входа. Для сенсорного интерфейса Univer Boards используйте **мобильные UI-плагины**.[^mobile-ui-mode] Выберите режим до создания редактора. В примере режима плагинов выше **замените** следующие импорты и регистрации UI до вызова `createUnit()`. Не добавляйте их к уже инициализированному настольному редактору. Сохраните плагины моделей, движки, локализации, CSS и импорты Facade. Классы экспортируются под разными именами из **одной точки входа пакета**. ```typescript import { UniverBoardsMobileUIPlugin } from '@univerjs-pro/boards-ui' import { UniverDocsMobileUIPlugin } from '@univerjs/docs-ui' import { UniverDrawingMobileUIPlugin } from '@univerjs/drawing-ui' import { UniverMobileUIPlugin } from '@univerjs/ui' univer.registerPlugin(UniverMobileUIPlugin, { container: 'app' }) univer.registerPlugin(UniverDocsMobileUIPlugin) univer.registerPlugin(UniverDrawingMobileUIPlugin) univer.registerPlugin(UniverBoardsMobileUIPlugin) ``` ### Соответствие плагинов Регистрируйте только нужные функции, сохраняя плагины моделей и зависимости. Наличие мобильного UI не означает одинаковый набор элементов управления на обеих платформах. Функциям Pro по-прежнему нужны соответствующая лицензия. Для функций, которым нужен backend, подключите соответствующие модули [Univer Server SDK](https://docs.univer.ai/ru-RU/server.md) к своему приложению. | Пакет | Настольная регистрация | Мобильная регистрация | | ---------------------------------------- | ----------------------------------- | ----------------------------------------- | | `@univerjs/ui` | `UniverUIPlugin` | `UniverMobileUIPlugin` | | `@univerjs/docs-ui` | `UniverDocsUIPlugin` | `UniverDocsMobileUIPlugin` | | `@univerjs/drawing-ui` | `UniverDrawingUIPlugin` | `UniverDrawingMobileUIPlugin` | | `@univerjs-pro/boards-ui` | `UniverBoardsUIPlugin` | `UniverBoardsMobileUIPlugin` | | `@univerjs/thread-comment-ui` | `UniverThreadCommentUIPlugin` | `UniverThreadCommentMobileUIPlugin` | | `@univerjs-pro/shape-editor-ui` | `UniverShapeEditorUIPlugin` | `UniverShapeEditorMobileUIPlugin` | | `@univerjs-pro/chart-ui` | `UniverChartUIPlugin` | `UniverChartMobileUIPlugin` | | `@univerjs-pro/exchange-client` | `UniverExchangeClientPlugin` | `UniverExchangeClientMobileUIPlugin` | | `@univerjs-pro/boards-chart-ui` | `UniverBoardsChartUIPlugin` | `UniverBoardsChartMobileUIPlugin` | | `@univerjs-pro/boards-mind-ui` | `UniverBoardsMindUIPlugin` | `UniverBoardsMindMobileUIPlugin` | | `@univerjs-pro/boards-resources-ui` | `UniverBoardsResourcesUIPlugin` | `UniverBoardsResourcesMobileUIPlugin` | | `@univerjs-pro/boards-table-ui` | `UniverBoardsTableUIPlugin` | `UniverBoardsTableMobileUIPlugin` | | `@univerjs-pro/boards-thread-comment-ui` | `UniverBoardsThreadCommentUIPlugin` | `UniverBoardsThreadCommentMobileUIPlugin` | ### Контейнер и сенсорное управление Задайте явную высоту контейнера и viewport страницы. `100dvh` соответствует динамической высоте области просмотра. Проверьте прокрутку, масштабирование двумя пальцами, выделение текста, буфер обмена и экранную клавиатуру в целевых мобильных браузерах. Уменьшение ширины не включает мобильные плагины. `UniverMobileUIPlugin` по умолчанию использует `disableAutoFocus: true`, чтобы редактор не получал фокус автоматически при инициализации. ```html
``` ## Пакеты дополнительных возможностей Добавляйте пакеты возможностей, когда редактору досок требуется соответствующий тип элемента: ```shell pnpm add @univerjs-pro/boards-table @univerjs-pro/boards-table-ui pnpm add @univerjs-pro/boards-mind @univerjs-pro/boards-mind-ui ``` Примеры регистрации возможностей приведены в разделах [«Таблицы»](https://docs.univer.ai/ru-RU/guides/boards/features/tables.md), [«Интеллект-карты»](https://docs.univer.ai/ru-RU/guides/boards/features/mind-maps.md) и [«Импорт и экспорт»](https://docs.univer.ai/ru-RU/guides/boards/features/import-export.md). ## Другие каналы выпуска Помимо стабильных выпусков, Univer предлагает каналы alpha / beta и nightly. Они позволяют заранее получить доступ к новейшим функциям, которые еще не выпущены официально. Однако вместе с новыми возможностями возрастают и риски: такие версии могут содержать ошибки, неполные или нестабильные функции. По возможности не используйте их в рабочей среде. ### Выпуски Alpha / Beta После завершения работы над новой функцией или существенным изменением команда разработчиков Univer может предварительно опубликовать их в канале alpha или beta. Установить alpha- или beta-версию пакета Univer можно следующей командой: #### npm ```bash npm install @univerjs-pro/boards@alpha # Alpha version npm install @univerjs-pro/boards@beta # Beta version ``` #### pnpm ```bash pnpm add @univerjs-pro/boards@alpha # Alpha version pnpm add @univerjs-pro/boards@beta # Beta version ``` #### yarn ```bash yarn add @univerjs-pro/boards@alpha # Alpha version yarn add @univerjs-pro/boards@beta # Beta version ``` #### bun ```bash bun add @univerjs-pro/boards@alpha # Alpha version bun add @univerjs-pro/boards@beta # Beta version ``` Если при использовании alpha- или beta-версий вы обнаружите проблему или захотите поделиться отзывом, сообщите об этом команде разработчиков Univer через [GitHub Issues](https://github.com/dream-num/univer/issues). Мы будем рады вашим отзывам о предварительных выпусках. ## Что дальше * [Быстрый старт](https://docs.univer.ai/ru-RU/guides/boards/getting-started/quickstart.md) * [Facade API](https://docs.univer.ai/ru-RU/guides/boards/getting-started/facade.md) * [Настройка лицензии](https://docs.univer.ai/ru-RU/server/license.md) * [Интеграция Server SDK](https://docs.univer.ai/ru-RU/server.md) [^peer-dependency]: `peerDependencies` — зависимости, совместимые версии которых предоставляет основное приложение. Это позволяет Univer и приложению использовать общую копию библиотек, например React. [^facade-entry]: Facade — прикладной API зарегистрированных плагинов. Импорт точки входа Facade добавляет методы API, но не регистрирует сам функциональный плагин. [^mobile-ui-mode]: Мобильный UI-плагин выбирает сенсорные элементы управления и мобильные сервисы при инициализации. Он не определяет устройство автоматически и не переключает существующий экземпляр при изменении размера окна. Чтобы сменить режим, сохраните состояние документа, уничтожьте старый экземпляр и инициализируйте выбранный набор плагинов.