Fonctionnalités principales

Le noyau d’Univer Slides associe un modèle de présentation à l’interface d’édition dans le navigateur. Le modèle enregistre la présentation sous forme d’instantané ISlideData, tandis que l’interface l’affiche et la modifie au moyen des commandes Univer.

Fonctionnalités

• Modèle de présentation : gère l’identité, le format des pages, l’ordre des diapositives, les diapositives, les masques, les dispositions, les thèmes, les transitions et les ressources.
• Affichage et édition : fournit le canevas, les miniatures, la sélection, le presse-papiers, l’édition du texte et des formes, les repères d’alignement et le diaporama.
• Pipeline de commandes : applique les changements de page et d’élément par des commandes et mutations afin de synchroniser le modèle, l’affichage, l’annulation et le rétablissement.
• Facade API : permet de créer, retrouver et enregistrer des présentations, puis de manipuler les diapositives et leurs éléments avec des objets destinés à l’application.
• Architecture à plugins : sépare du noyau les fonctions facultatives telles que les tableaux, les graphiques, l’impression et l’import-export.

Mode plugin

Installation

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

Utilisation

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

Pour afficher une présentation sans commandes d’édition, passez { editor: { enabled: false } } à UniverSlidesUIPlugin. Dans Node.js, enregistrez uniquement UniverSlidesPlugin, sans le plugin d’interface.

Mode prédéfini

Univer Slides ne fournit actuellement aucun package de preset. Utilisez le mode plugin pour un environnement limité au modèle comme pour l’éditeur dans le navigateur.

Organisation du ruban

Accueil regroupe thème, transition, arrière-plan et notes ; Insertion regroupe le contenu et la liste d’objets ; Affichage contient taille de page, zoom et plein écran. L’onglet contextuel suit la sélection : forme, image, graphique ou commandes communes pour une sélection mixte comprenant images ou graphiques. Le format d’image propose recadrage et forme de découpe, taille, position et rotation ; certains contrôles nécessitent une seule image. Les tables utilisent les contrôles du plugin UI de tables. Le format de forme propose aussi un bouton distinct pour la barre flottante.

Ordre des menus et disposition en grille

Configurez menu et ribbonType lors de l’enregistrement existant de UniverUIPlugin. Ces options appartiennent à l’interface commune, pas à UniverSlidesUIPlugin. L’exemple utilise les identifiants réels des menus de Slides :

Configuration initiale

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 trie par ordre croissant les onglets, groupes ou éléments de même niveau, sans déplacer un élément vers un autre groupe. L’identifiant d’un élément est disponible dans son attribut data-u-command ; il ne correspond pas nécessairement à l’identifiant de la commande.

Mise à jour à l’exécution

Importez @univerjs/ui/facade avant de créer univerAPI avec FUniver.newAPI(univer). updateMenuConfig() fusionne les modifications, conserve les champs non spécifiés et actualise les menus. Les menus enregistrés plus tard reçoivent également ces réglages.

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

gridLayout ne concerne que le Ribbon en grille. Chaque groupe comporte deux lignes ; row et column commencent à 1. Les coordonnées explicites déterminent la position : pour échanger des cellules occupées, modifiez les deux éléments, pas seulement order. Les champs facultatifs omis conservent la configuration ou le Schema existant. Voir IRibbonGridLayout pour les étendues, libellés, largeurs et tailles d’icônes.

Gardez l’édition activée dans UniverSlidesUIPlugin : editor.enabled: false empêche l’enregistrement du Ribbon du produit. Les réglages de menu ne créent pas les boutons non enregistrés.

Les boutons personnalisés et les entrées de sous-menu acceptent aussi order et gridLayout dans createMenu() et createSubmenu(), puis sont enregistrés avec appendTo(). Le contenu du menu contextuel n’utilise pas la grille du Ribbon.