Características principales

El núcleo de Univer Slides combina un modelo de presentación con la interfaz de edición del navegador. El modelo guarda la presentación como una instantánea ISlideData, mientras que la interfaz la renderiza y edita mediante comandos de Univer.

Funciones

• Modelo de presentación: administra la identidad, el tamaño de página, el orden de las diapositivas, las diapositivas, los patrones, los diseños, los temas, las transiciones y los recursos.
• Renderizado y edición: ofrece el lienzo, las miniaturas, la selección, el portapapeles, la edición de texto y formas, las guías de alineación y la presentación de diapositivas.
• Canal de comandos: aplica los cambios de páginas y elementos mediante comandos y mutaciones para sincronizar el modelo, el renderizado, deshacer y rehacer.
• Facade API: crea, busca y guarda presentaciones, y expone objetos orientados a la aplicación para trabajar con diapositivas y elementos.
• Arquitectura de plugins: mantiene fuera del núcleo las funciones opcionales, como tablas, gráficos, impresión e importación y exportación.

Modo plugin

Instalación

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

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

Uso

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' })

Para renderizar una presentación sin controles de edición, pasa { editor: { enabled: false } } a UniverSlidesUIPlugin. En Node.js, registra únicamente UniverSlidesPlugin, sin el plugin de interfaz.

Modo preestablecido

Univer Slides no ofrece actualmente un paquete de preset. Utiliza el modo plugin tanto para un entorno que solo use el modelo como para el editor del navegador.

Organización de la cinta

Inicio contiene tema, transición, fondo y notas; Insertar agrupa contenido y lista de objetos; Vista ofrece tamaño de página, zoom y pantalla completa. La pestaña contextual depende de la selección: formas, imágenes, gráficos o controles comunes para selecciones mixtas con imágenes o gráficos. El formato de imagen incluye recorte y forma de recorte, tamaño, posición y rotación; algunos controles requieren una sola imagen. Las tablas usan los controles del plugin UI de tablas. El formato de forma incluye un interruptor independiente para la barra flotante.

Orden de menús y disposición en cuadrícula

Configura menu y ribbonType en el registro existente de UniverUIPlugin. Son opciones de la interfaz compartida, no de UniverSlidesUIPlugin. El ejemplo utiliza los identificadores reales de los menús de Slides:

Configuración inicial

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 ordena de menor a mayor las pestañas, grupos o elementos del mismo nivel; no mueve elementos a otro grupo. El identificador del elemento se obtiene de su atributo data-u-command y no tiene por qué coincidir con el de la orden.

Actualizaciones en ejecución

Importa @univerjs/ui/facade antes de crear univerAPI con FUniver.newAPI(univer). updateMenuConfig() combina los cambios, conserva los campos no especificados y actualiza los menús. La configuración también se aplica a los menús registrados posteriormente.

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

gridLayout solo afecta al Ribbon en cuadrícula. Cada grupo tiene dos filas y row y column empiezan en 1. Las coordenadas explícitas determinan la posición: al intercambiar celdas ocupadas, actualiza ambos elementos y no solo order. Los campos opcionales omitidos conservan la configuración o el Schema existente. Consulta IRibbonGridLayout para los tamaños de celda, etiquetas, anchuras y tamaños de icono.

Mantén habilitada la edición en UniverSlidesUIPlugin: editor.enabled: false impide registrar el Ribbon del producto. Las modificaciones de menú no crean botones que no estén registrados.

Los botones personalizados y las entradas de submenú también aceptan order y gridLayout en createMenu() y createSubmenu(); llama a appendTo() para registrarlos. El contenido del menú emergente no utiliza la cuadrícula del Ribbon.