# Installation et utilisation de base - Human documentation: [https://docs.univer.ai/fr-FR/guides/slides/getting-started/installation](https://docs.univer.ai/fr-FR/guides/slides/getting-started/installation) - Agent Markdown: [https://docs.univer.ai/fr-FR/guides/slides/getting-started/installation.md](https://docs.univer.ai/fr-FR/guides/slides/getting-started/installation.md) - Requested language: `fr-FR` - Content language: `fr-FR` - Documentation version: `1.2.0` - Source: [slides/getting-started/installation/index.fr-FR.mdx](https://github.com/dream-num/documentation/blob/dev/content/guides/slides/getting-started/installation/index.fr-FR.mdx) --- Ce chapitre présente l’installation et l’utilisation de base d’Univer Slides. Ce guide utilise les packages Web SDK pour Slides. Il n’existe actuellement aucun preset Slides ; créez donc l’application en mode plugin. Si vous ne connaissez pas encore les concepts fondamentaux d’Univer, commencez par lire le [guide de démarrage rapide](https://docs.univer.ai/fr-FR/guides/slides/getting-started/quickstart.md). Univer propose deux modes d’intégration : *le mode prédéfini* et *le mode plugin*. Le mode prédéfini simplifie la configuration grâce à des ensembles de plugins préconfigurés. Pour une **personnalisation ou des extensions approfondies**, nous recommandons le mode plugin, qui permet de combiner et de configurer les plugins individuellement. ## Configuration en mode plugin Univer met Slides à disposition sous la forme d’un ensemble de plugins. Un éditeur destiné au navigateur enregistre généralement l’environnement d’exécution partagé d’Univer, le plugin de licence , les dépendances Docs et Drawing, puis les plugins du modèle et de l’interface utilisateur de Slides. ### Utilisation d’un gestionnaire de packages Utilisez un outil de compilation compatible avec les modules ES et le champ `exports` de `package.json`. #### Installation Univer utilise React pour son interface et RxJS pour les flux de données ; il peut aussi être intégré à Vue ou Angular. Vérifiez que les peer dependencies[^peer-dependency] `react`, `react-dom` et `rxjs` sont installées. La commande Yarn ci-dessous les inclut explicitement. Conservez **la même version** pour tous les packages `@univerjs/*` et `@univerjs-pro/*`. #### pnpm ```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 ``` #### npm ```shell 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 ```shell 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 ```shell 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 Créez le conteneur avant d’initialiser Univer et définissez une hauteur explicite : ```html
``` Importez les entrées facade utilisées ci-dessous avant d’appeler `FUniver.newAPI(univer)`. Importez les CSS dans cet ordre : `@univerjs/design`, `@univerjs/ui`, puis ceux du produit. > [!WARNING: Attention] > * Enregistrez `UniverLicensePlugin` avant les plugins Slides. > * Importez le CSS partagé de l’interface utilisateur avant le CSS propre au produit. > * N’ajoutez les paquets de fonctionnalités facultatives, tels que l’impression, les tableaux, les graphiques et l’importation/exportation, que si le produit en a besoin. > * `UniverSlidesUIPlugin` charge automatiquement `UniverProFormulaEnginePlugin` pour les formes. Si la même instance `Univer` enregistre aussi `UniverFormulaEnginePlugin`, installez `@univerjs-pro/engine-formula` et remplacez l'import et l'enregistrement de ce moteur par `UniverProFormulaEnginePlugin` dans le code d'initialisation. N'enregistrez pas les deux moteurs de formules. 1. Importez les styles, les packs de langue et les plugins requis : ```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' ``` 1. Importez les points d’entrée de la facade si vous souhaitez utiliser la Facade API[^facade-entry] : ```typescript import { FUniver } from '@univerjs/core/facade' import '@univerjs-pro/slides/facade' ``` 1. Créez une instance d’Univer, enregistrez les plugins, puis créez une unité Slides : ```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) ``` L’objet `univerAPI` renvoyé par `FUniver.newAPI(univer)` est la Facade API d’Univer. Utilisez-le pour créer des présentations et appeler les API de Slides. #### Méthodes `univer.registerPlugin` et `univer.registerPlugins` La méthode `univer.registerPlugin` sert à enregistrer un plugin dans l’instance Univer. Vous pouvez l’appeler après avoir créé l’instance Univer afin d’y enregistrer des plugins. Vous pouvez enregistrer un plugin avec la méthode `univer.registerPlugin(Plugin, options)`, où `Plugin` désigne le plugin à enregistrer et `options` les paramètres de configuration facultatifs, qui peuvent varier d’un plugin à l’autre. Vous pouvez également utiliser `univer.registerPlugins` pour passer un tableau et enregistrer plusieurs plugins en une seule fois. Cette possibilité est utile lorsque vous devez centraliser la gestion des plugins. ```typescript univer.registerPlugins([ UniverRenderEnginePlugin, [UniverUIPlugin, { container: 'app', }], UniverDocsPlugin, UniverDocsUIPlugin, UniverDrawingPlugin, [UniverLicensePlugin, { license: process.env.CLIENT_LICENSE_TEXT, }], UniverSlidesPlugin, UniverSlidesUIPlugin, ]) ``` #### Paquets de fonctionnalités facultatives Ajoutez les paquets de fonctionnalités lorsque l’éditeur a besoin des capacités correspondantes : ```shell pnpm add @univerjs-pro/slides-print pnpm add @univerjs-pro/slides-table @univerjs-pro/slides-table-ui pnpm add @univerjs-pro/chart-ui @univerjs-pro/slides-chart @univerjs-pro/slides-chart-ui pnpm add @univerjs-pro/slides-exchange-client ``` Pour consulter des exemples d’enregistrement de fonctionnalités, reportez-vous aux pages [Impression](https://docs.univer.ai/fr-FR/guides/slides/features/print.md), [Tableau](https://docs.univer.ai/fr-FR/guides/slides/features/tables.md), [Graphiques](https://docs.univer.ai/fr-FR/guides/slides/features/charts.md) et [Importation et exportation](https://docs.univer.ai/fr-FR/guides/slides/features/import-export.md). #### Charger les plugins facultatifs à la demande Le mode plugin vous permet de différer le chargement des plugins de fonctionnalités jusqu’à ce que le produit en ait réellement besoin : ```typescript univer.createUnit(UniverInstanceType.UNIVER_SLIDE, {}) import('@univerjs-pro/slides-chart').then(({ UniverSlidesChartPlugin }) => { univer.registerPlugin(UniverSlidesChartPlugin) }) ``` ### Utilisation côté serveur Dans Node.js, enregistrez les plugins du modèle et omettez ceux de l’interface utilisateur destinés au navigateur : ```typescript univer.registerPlugin(UniverSlidesPlugin) ``` Le plugin de modèle permet le traitement de snapshots sans interface. Pour fournir des API de collaboration ou de conversion, intégrez les [modules Server SDK](https://docs.univer.ai/fr-FR/server.md) correspondants ; enregistrer ce plugin seul ne crée pas ces services. ## Prise en charge mobile > [!WARNING] > Ces exemples nécessitent des paquets SDK exportant les plugins mobiles ci-dessous. Gardez toutes les dépendances `@univerjs/*` et `@univerjs-pro/*` à **la même version**. > > `1.0.0-rc.0` n’exporte pas `UniverSlidesMobileUIPlugin`. Utilisez une version compilée incluant cette entrée mobile avant de suivre cet exemple. Utilisez les **plugins UI mobiles** pour les commandes tactiles de Univer Slides.[^mobile-ui-mode] Choisissez le mode avant de créer l’éditeur. Dans l’exemple en mode plugin ci-dessus, **remplacez** les imports et inscriptions UI suivants avant `createUnit()`. Ne les ajoutez pas à un éditeur de bureau déjà initialisé. Conservez les modèles, moteurs, traductions, CSS et imports Facade. Les classes sont des exports nommés du **même point d’entrée du paquet**. ```typescript 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) ``` ### Correspondance des plugins Enregistrez uniquement les fonctionnalités utilisées, avec leurs modèles et dépendances. Un export UI mobile ne garantit pas des commandes identiques sur les deux interfaces. Les fonctionnalités Pro exigent toujours la licence correspondante. Pour les fonctionnalités nécessitant un backend, intégrez les modules correspondants du [Univer Server SDK](https://docs.univer.ai/fr-FR/server.md) à votre application. | Paquet | Inscription de bureau | Inscription mobile | | ---------------------------------------- | ----------------------------------- | ----------------------------------------- | | `@univerjs/ui` | `UniverUIPlugin` | `UniverMobileUIPlugin` | | `@univerjs/docs-ui` | `UniverDocsUIPlugin` | `UniverDocsMobileUIPlugin` | | `@univerjs-pro/slides-ui` | `UniverSlidesUIPlugin` | `UniverSlidesMobileUIPlugin` | | `@univerjs/drawing-ui` | `UniverDrawingUIPlugin` | `UniverDrawingMobileUIPlugin` | | `@univerjs/thread-comment-ui` | `UniverThreadCommentUIPlugin` | `UniverThreadCommentMobileUIPlugin` | | `@univerjs-pro/shape-editor-ui` | `UniverShapeEditorUIPlugin` | `UniverShapeEditorMobileUIPlugin` | | `@univerjs-pro/chart-ui` | `UniverChartUIPlugin` | `UniverChartMobileUIPlugin` | | `@univerjs-pro/exchange-client` | `UniverExchangeClientPlugin` | `UniverExchangeClientMobileUIPlugin` | | `@univerjs-pro/slides-chart-ui` | `UniverSlidesChartUIPlugin` | `UniverSlidesChartMobileUIPlugin` | | `@univerjs-pro/slides-print` | `UniverSlidesPrintPlugin` | `UniverSlidesPrintMobilePlugin` | | `@univerjs-pro/slides-table-ui` | `UniverSlidesTableUIPlugin` | `UniverSlidesTableMobileUIPlugin` | | `@univerjs-pro/slides-thread-comment-ui` | `UniverSlidesThreadCommentUIPlugin` | `UniverSlidesThreadCommentMobileUIPlugin` | ### Conteneur et interactions tactiles Définissez une hauteur explicite et le viewport de la page. `100dvh` suit la hauteur dynamique du viewport. Vérifiez le défilement, le zoom par pincement, la sélection de texte, le presse-papiers et le clavier virtuel sur les navigateurs mobiles ciblés. Réduire la largeur ne sélectionne pas les plugins mobiles. `UniverMobileUIPlugin` utilise `disableAutoFocus: true` par défaut pour éviter que l’éditeur ne prenne automatiquement le focus à l’initialisation. ```html
``` ## Autres versions Outre les versions stables, Univer propose des canaux alpha / beta et nightly. Ces versions vous donnent un accès anticipé aux fonctionnalités les plus récentes qui n’ont pas encore été publiées officiellement. Gardez toutefois à l’esprit que davantage de fonctionnalités implique aussi davantage de risques. Ces versions peuvent contenir des bugs, des fonctionnalités incomplètes ou instables. Évitez autant que possible de les utiliser dans des environnements de production. ### Version alpha / beta Lorsque l’équipe de développement d’Univer termine une nouvelle fonctionnalité ou une modification importante, elle peut la publier en avant-première sur le canal alpha ou beta. Vous pouvez installer la version alpha / beta d’un package Univer à l’aide de la commande suivante : #### npm ```bash npm install @univerjs-pro/slides@alpha # Alpha version npm install @univerjs-pro/slides@beta # Beta version ``` #### pnpm ```bash pnpm add @univerjs-pro/slides@alpha # Alpha version pnpm add @univerjs-pro/slides@beta # Beta version ``` #### yarn ```bash yarn add @univerjs-pro/slides@alpha # Alpha version yarn add @univerjs-pro/slides@beta # Beta version ``` #### bun ```bash bun add @univerjs-pro/slides@alpha # Alpha version bun add @univerjs-pro/slides@beta # Beta version ``` Si vous rencontrez un problème ou souhaitez faire part de vos commentaires lors de l’utilisation des versions alpha / beta, signalez-les à l’équipe de développement d’Univer via les [issues GitHub](https://github.com/dream-num/univer/issues). Vos retours sur ces versions préliminaires sont les bienvenus. ## Étapes suivantes * Découvrez comment utiliser la [Facade API](https://docs.univer.ai/fr-FR/guides/slides/getting-started/facade.md). * [Configuration de la licence](https://docs.univer.ai/fr-FR/server/license.md) * [Intégration du Server SDK](https://docs.univer.ai/fr-FR/server.md) * Ajoutez des plugins depuis la section [Fonctionnalités](https://docs.univer.ai/fr-FR/guides/slides/features/print.md). [^peer-dependency]: Les `peerDependencies` sont des dépendances que l’application hôte doit fournir dans une version compatible. Elles permettent de partager des bibliothèques comme React avec Univer. [^facade-entry]: Facade est l’API applicative des plugins enregistrés. Importer une entrée Facade ajoute des méthodes API, mais n’enregistre pas le plugin fonctionnel lui-même. [^mobile-ui-mode]: Un plugin UI mobile sélectionne les commandes tactiles et les services mobiles à l’initialisation. Il ne détecte pas automatiquement l’appareil et ne change pas le mode d’une instance lors du redimensionnement. Pour changer de mode, conservez l’état du document, détruisez l’ancienne instance et initialisez les plugins choisis.