Web SDK

Основные возможности

Сведения о плагинах

Ядро Univer Slides объединяет модель презентации и интерфейс редактирования в браузере. Модель сохраняет презентацию как снимок ISlideData, а интерфейс отображает и изменяет эту модель с помощью команд Univer.

Возможности

  • Модель презентации: управляет идентификатором, размером страницы, порядком слайдов, слайдами, образцами, макетами, темами, переходами и ресурсами.
  • Отображение и редактирование: предоставляет холст, миниатюры, выделение, буфер обмена, редактирование текста и фигур, направляющие выравнивания и показ слайдов.
  • Конвейер команд: применяет изменения страниц и элементов через команды и мутации, синхронизируя модель, отображение, отмену и повтор.
  • Facade API: создаёт, находит и сохраняет презентации, а также предоставляет прикладные объекты для работы со слайдами и элементами.
  • Архитектура плагинов: отделяет от ядра дополнительные функции — таблицы, диаграммы, печать, импорт и экспорт.

Режим пресетов

Univer Slides пока не предоставляет пакет пресета. Используйте режим плагинов как для среды только с моделью, так и для браузерного редактора.

Режим плагинов

Установка

Shell
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

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

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 } from '@univerjs/core'import { FUniver } from '@univerjs/core/facade'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-pro/slides/facade'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'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)const univerAPI = FUniver.newAPI(univer)const presentation = univerAPI.createPresentation({ name: 'Quarterly review' })

Чтобы отображать презентацию в браузере без элементов редактирования, передайте в UniverSlidesUIPlugin параметр { editor: { enabled: false } }. В Node.js регистрируйте только UniverSlidesPlugin, без плагина интерфейса.

Организация ленты

Вкладка начала содержит тему, переход, фон и заметки; вставка — содержимое и список объектов; вид — размер страницы, масштаб и полный экран. Контекстная вкладка зависит от выбора: фигуры, изображения, диаграммы или общие операции для смешанного выбора с изображениями либо диаграммами. Формат изображения включает обрезку и её форму, размер, положение и поворот; часть элементов требует одного изображения. Таблицы используют элементы своего UI-плагина. Для фигур также есть отдельный переключатель плавающей панели.

Порядок меню и сеточная раскладка

Задайте menu и ribbonType при существующей регистрации UniverUIPlugin. Это параметры общего UI, а не UniverSlidesUIPlugin. В примере используются реальные идентификаторы пунктов меню Slides:

Начальная настройка

TypeScript
import type { MenuConfig } from '@univerjs/ui'import { UniverUIPlugin } from '@univerjs/ui'const menu: MenuConfig = {  'ribbon.view': { order: -1 },  'ribbon.start.layout': { order: -1 },  'slide.menu.insert.text': {    order: 1,    gridLayout: { row: 1, column: 2, rowSpan: 2, showLabel: true, width: 96 },  },  'slide.menu.insert.shape': {    order: 0,    gridLayout: { row: 1, column: 1, rowSpan: 2, showLabel: true },  },}univer.registerPlugin(UniverUIPlugin, { container: 'app', ribbonType: 'grid', menu })

order сортирует вкладки, группы или пункты одного уровня по возрастанию и не переносит пункты в другую группу. Идентификатор пункта можно получить из атрибута data-u-command; он не обязательно совпадает с идентификатором команды.

Обновление во время работы

Импортируйте @univerjs/ui/facade перед созданием univerAPI через FUniver.newAPI(univer). updateMenuConfig() объединяет изменения, сохраняет неуказанные поля и обновляет меню. Настройки также применяются к меню, зарегистрированным позднее.

TypeScript
import '@univerjs/ui/facade'univerAPI.updateMenuConfig({  'slide.menu.insert.text': { gridLayout: { row: 1, column: 2, width: 120 } },})

gridLayout действует только на сеточную ленту Ribbon. В каждой группе две строки; row и column начинаются с 1. Явные координаты определяют положение, поэтому при обмене занятыми ячейками меняйте оба пункта, а не только order. Неуказанные необязательные поля наследуются из текущих настроек или Schema. Размеры областей, подписи, ширина и размер значков описаны в IRibbonGridLayout.

Оставьте редактирование включённым в UniverSlidesUIPlugin: при editor.enabled: false лента продукта не регистрируется. Переопределения меню не создают незарегистрированные кнопки.

Для своих кнопок и пунктов, открывающих подменю, createMenu() и createSubmenu() также принимают order и gridLayout; вызовите appendTo() для регистрации. На содержимое всплывающего меню сетка Ribbon не распространяется.

Насколько полезно это руководство?

© 2026 DreamNum Co., Ltd.