# Fonctionnalités principales - Human documentation: [https://docs.univer.ai/fr-FR/guides/slides/features/core](https://docs.univer.ai/fr-FR/guides/slides/features/core) - Agent Markdown: [https://docs.univer.ai/fr-FR/guides/slides/features/core.md](https://docs.univer.ai/fr-FR/guides/slides/features/core.md) - Requested language: `fr-FR` - Content language: `fr-FR` - Documentation version: `1.2.0` - Source: [slides/features/core/index.fr-FR.mdx](https://github.com/dream-num/documentation/blob/dev/content/guides/slides/features/core/index.fr-FR.mdx) --- #### Package metadata ```json { "preset": [], "plugins": [ { "client": "@univerjs-pro/slides", "locale": "@univerjs-pro/slides/locale/fr-FR", "facade": "@univerjs-pro/slides/facade" }, { "client": "@univerjs-pro/slides-ui", "locale": "@univerjs-pro/slides-ui/locale/fr-FR", "style": "@univerjs-pro/slides-ui/lib/index.css" } ], "license": true, "server": false } ``` 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 #### npm ```bash 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 ``` #### pnpm ```bash 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 ``` #### yarn ```bash 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 ```bash 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 ```ts 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 ```ts 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()`](https://docs.univer.ai/fr-FR/reference/facade/univer.md#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. ```ts 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`](https://docs.univer.ai/fr-FR/reference/packages/plugins/univerjs/ui.md#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()`](https://docs.univer.ai/fr-FR/reference/packages/plugins/univerjs/ui.md#ifacademenuitem), puis sont enregistrés avec `appendTo()`. Le contenu du menu contextuel n’utilise pas la grille du Ribbon.