Tutoriel pour apprendre comment intégrer ONLYOFFICE DocSpace dans une application à page unique.

Daria Lapikhina

Pour réagir au contenu de cet article, un espace de dialogue vous est proposé sur le forum. Commentez

- Titre : Tutoriel pour apprendre comment intégrer ONLYOFFICE DocSpace dans une application à page unique.

- Auteur : Daria Lapikhina

- Parution : 18 novembre 2023

- Licence : Copyright ® 2023 Daria Lapikhina . Aucune reproduction, même partielle, ne peut être faite de ce site et de l'ensemble de son contenu : textes, documents, images, etc. sans l'autorisation expresse de l'auteur. Sinon vous encourez selon la loi jusqu'à trois ans de prison et jusqu'à 300 000 € de dommages et intérêts.

Sommaire

- I. Introduction

- II. Pourquoi intégrer ONLYOFFICE DocSpace

- III. Installation d’ONLYOFFICE DocSpace

- III-A. Version autohébergée

- III-B. Version en cloud

- IV. Intégration de DocSpace

- V. Intégration de DocSpace dans les pages GitHub

- VI. Ressources utiles

- VII. Remerciements Developpez.com

I - Introduction

ONLYOFFICE DocSpace est une plateforme cloud collaborative qui permet aux utilisateurs de modifier et d’éditer des documents texte, des feuilles de calcul, des présentations et des formulaires dans des salles personnalisables. La solution dispose des fonctions de sécurité et des outils de collaboration avancés. Dans ce tutoriel, nous avons montré comment intégrer une salle de DocSpace dans une application à page unique (SPA).

Maintenant, nous allons expliquer comment intégrer tout l’espace ONLYOFFICE DocSpace dans une application à page unique.

II - Pourquoi intégrer ONLYOFFICE DocSpace

DocSpace offre un large éventail d’options de personnalisation, ce qui vous permet d’améliorer la fonctionnalité de vos applications web et de les adapter précisément à vos besoins :

- collaboration sur le contenu en toute transparence avec des éditeurs et des visionneurs collaboratifs ;

- création et personnalisation de salles à de diverses fins ;

- intégration transparente de sections, de salles ou de dossiers DocSpace spécifiques dans votre application Web ;

- fonctions de sécurité robustes, notamment le chiffrement AES-256, l’autorisation JWT ou le 2FA ;

- amélioration de votre productivité grâce à l’intégration transparente d’OpenAI.

ONLYOFFICE DocSpace permet aux développeurs d’améliorer les fonctions de collaboration et de stockage de leurs produits, ce qui en fait une option idéale pour les applications de CRM, de PMS, de messagerie, etc.

Dans ce tutoriel, nous allons intégrer la version cloud dans une application à page unique (SPA).

III - Installation d’ONLYOFFICE DocSpace

Tout d’abord, il faut avoir une instance d’ONLYOFFICE DocSpace autohébergée ou un compte DocSpace en ligne.

III-A - Version autohébergée

Vous pouvez installer ONLYOFFICE DocSpace sur vos serveurs privés sur Linux ou Windows. Il est possible d’opter pour une version communautaire gratuite ou une version pour les entreprises.

Suivez les guides complets pour accomplir l’installation pour votre option choisie.

III-B - Version en cloud

Autrement, il est possible de créer un compte en ligne pour éviter des soucis avec l’installation et la configuration. Créez un compte DocSpace et choisissez votre plan tarifaire : Startup gratuit ou un abonnement Business. La création du compte est disponible sur le site web officiel.

Sur la page d’inscription, remplissez tous les champs et cliquez sur le bouton Commencer ci-dessous.

IV - Intégration de DocSpace

La fonctionnalité de DocSpace vous permet d’intégrer soit l’ensemble de l’application, soit des salles et des dossiers spécifiques. L’intégration de l’instance entière de DocSpace est un processus très simple, réalisable en quelques clics :

- sur votre écran d’accueil DocSpace, cliquez sur les trois points à côté de votre nom et accédez aux Paramètres DocSpace ;

- dans l’onglet de droite, choisissez l’option Developer Tool ;

- ensuite, allez sur le SDK JavaScript et faites défiler la page jusqu’à la section Créer un exemple d’intégration dans DocSpace.

Ici, vous pouvez personnaliser les options d’affichage, notamment la largeur, la hauteur, les éléments d’interface, les paramètres d’affichage des données et les paramètres d’affichage avancés ;

- passez à la section Code à insérer et copiez l’extrait de code généré :

- insérez l’extrait de code généré dans le fichier index.html de votre site web ;

- retournez à la page de DocSpace Developer Tool et faites défiler jusqu’à la section Intégrer DocSpace en tant qu’iframe. Collez le lien vers votre site web et appuyez sur l’icône +. Le lien apparaîtra sous le champ de saisie :

- allez sur votre site web :

V - Intégration de DocSpace dans les pages GitHub

- Connectez-vous à votre GitHub.

- Dans votre compte GitHub, créez un nouveau dépôt avec votre nom d’utilisateur suivi de .github.io.

- Allez dans votre dépôt GitHub, créez un nouveau fichier index.html, collez l’extrait de code du SDK Javascript DocSpace, puis validez les modifications.

- Déployez votre référentiel sous forme de pages GitHub.

- Retournez à la page de DocSpace Developer Tool et faites défiler l’écran jusqu’à la section DocSpace intégré en tant qu’iframe. Insérez le lien vers votre domaine GitHub où votre site web est hébergé, puis cliquez sur l’icône +. Veillez à ce que le lien respecte le format suivant : votreNomGitHub.github.io. Le lien s’affiche sous le champ de saisie.

- Allez sur votre site web.

Ce tutoriel a montré comment ONLYOFFICE DocSpace porte la collaboration à un niveau supérieur et s'intègre de manière transparente dans vos flux de travail. Grâce à ses fonctionnalités, vous pouvez facilement améliorer votre collaboration documentaire.

VI - Ressources utiles

- Code source de ONLYOFFICE DocSpace

- En savoir plus sur ONLYOFFICE DocSpace

- Autres tutoriels ONLYOFFICE

VII - Remerciements Developpez.com

Nous tenons à remercier Malick pour la mise au gabarit et escartefigue pour la relecture orthographique.