Instalación y uso básico

Este capítulo presenta la instalación y el uso básico de Univer Slides. Esta guía utiliza los paquetes de Web SDK para Slides. Actualmente no hay un preset de Slides, por lo que debe crear la aplicación en modo plugin.

Si no está familiarizado con los conceptos básicos de Univer, lea primero Inicio rápido.

Univer ofrece dos modos de integración: el modo preestablecido y el modo plugin. El modo preestablecido simplifica la configuración mediante conjuntos de plugins preconfigurados. Si necesita personalizaciones o extensiones avanzadas, recomendamos el modo plugin para combinar y configurar los plugins de forma individual.

Configuración a través del modo complemento

Univer expone Presentaciones como un conjunto de complementos. Un editor de navegador generalmente registra el tiempo de ejecución compartido de Univer, el complemento de licencia , las dependencias de Docs y Drawing, y luego el modelo de Slides y los complementos de UI.

Uso del Administrador de paquetes

Utiliza una herramienta de compilación compatible con ES Modules y el campo exports de package.json.

Instalación

Univer utiliza React para la interfaz y RxJS para los flujos de datos; también puede integrarse en Vue o Angular. Comprueba que las peer dependencies¹ react, react-dom y rxjs estén instaladas. El comando de Yarn siguiente las incluye explícitamente.

Mantén todos los paquetes @univerjs/* y @univerjs-pro/* en la misma versió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 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

Uso

Crea el contenedor antes de inicializar Univer y asígnale una altura explícita:

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

Importa las entradas facade utilizadas a continuación antes de llamar a FUniver.newAPI(univer). Importa el CSS en este orden: @univerjs/design, @univerjs/ui y, por último, el CSS del producto.

1. Importe estilos, paquetes de configuración regional y los complementos necesarios:

   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. Importe entradas de fachada si desea utilizar Facade API²:

   TypeScript

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

3. Cree una instancia de Univer, registre complementos y cree una unidad de Diapositivas:

   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)

   Expandir código

El objeto univerAPI devuelto por FUniver.newAPI(univer) es la API de Facade de Univer. Úselo para crear presentaciones y llamar a las API de Presentaciones.

Métodos univer.registerPlugin y univer.registerPlugins

El método univer.registerPlugin se utiliza para registrar un complemento en la instancia de Univer. Puede llamar a este método después de crear la instancia de Univer para registrar complementos.

Puede registrar un complemento utilizando el método univer.registerPlugin(Plugin, options), donde Plugin es el complemento que se registrará y options son elementos de configuración opcionales, ya que cada complemento puede tener diferentes elementos de configuración.

También puede usar univer.registerPlugins para pasar una matriz y registrar varios complementos a la vez. Esto es útil para escenarios en los que necesita administrar complementos de forma centralizada.

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

Paquetes de funciones opcionales

Agregue paquetes de funciones cuando el editor necesite la capacidad correspondiente:

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

Para ver ejemplos de registro de funciones, consulte Imprimir, Tabla, Gráficos e Importación y exportación.

Complementos opcionales de carga diferida

El modo de complemento le permite retrasar los complementos de funciones hasta que el producto realmente los necesite:

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

Uso del lado del servidor

En Node.js, registre los complementos del modelo y omita la interfaz de usuario del navegador. complementos:

univer.registerPlugin(UniverSlidesPlugin)

El plugin del modelo permite procesar snapshots sin interfaz. Para ofrecer API de colaboración o conversión, integra los módulos de Server SDK correspondientes; registrar este plugin no crea esos servicios.

Compatibilidad móvil

Utilice plugins de UI móvil para los controles táctiles de Univer Slides.³ Elija el modo antes de crear el editor.

En el ejemplo de modo plugin anterior, sustituya las siguientes importaciones y registros de UI antes de createUnit(). No los añada a un editor de escritorio ya inicializado. Conserve modelos, motores, traducciones, CSS e importaciones Facade. Las clases son exportaciones con nombre del mismo punto de entrada del paquete.

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)

Correspondencia de plugins

Registre solo las funciones necesarias, con sus modelos y dependencias. Disponer de una UI móvil no implica que ambas interfaces ofrezcan los mismos controles. Las funciones Pro siguen necesitando la licencia correspondiente. Para las funciones que necesitan un backend, integra los módulos correspondientes de Univer Server SDK en tu aplicación.

Contenedor e interacción táctil

Defina una altura explícita y el viewport de la página. 100dvh sigue la altura dinámica del viewport. Compruebe el desplazamiento, el zoom con dos dedos, la selección de texto, el portapapeles y el teclado virtual en los navegadores móviles de destino. Reducir el ancho no selecciona los plugins móviles.

UniverMobileUIPlugin usa disableAutoFocus: true de forma predeterminada para evitar que el editor tome el foco automáticamente al inicializarse.

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

Otras versiones

Además de las versiones estables, Univer ofrece canales alfa/beta y nocturnos. Estas versiones le permiten obtener acceso anticipado a las funciones más nuevas que aún no se han lanzado oficialmente. Sin embargo, tenga en cuenta que más funciones también significan más riesgos. Estas versiones pueden contener errores, funciones incompletas o características inestables. Evite el uso de estas versiones en entornos de producción siempre que sea posible.

Lanzamiento alfa/beta

Cuando el equipo de desarrollo de Univer completa una nueva función o un cambio significativo, es posible que lo publique previamente en el canal alfa o beta. Puede instalar la versión alfa/beta de un paquete de Univer usando el siguiente comando:

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

Si encuentra algún problema o tiene algún comentario mientras usa las versiones alfa/beta, infórmelo al equipo de desarrollo de Univer a través de Problemas de GitHub.

Agradecemos sus comentarios sobre estas primeras versiones.

Próximos pasos

• Aprenda a usar API de Facade.
• Configuración de la licencia
• Integración de Server SDK
• Agregue complementos de funciones desde el Sección Características.