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▲
VII. Remerciements Developpez.com▲
Nous tenons à remercier Malick pour la mise au gabarit et escartefigue pour la relecture orthographique.