Recherche de site Web

Comment intégrer ONLYOFFICE Docs avec Angular

Angular est un framework de développement d’applications front-end gratuit et open-source basé sur TypeScript, largement utilisé pour la création d’applications mobiles natives et la création d’applications installées sur ordinateur pour Linux, Windows et macOS.

Si vous développez et exécutez des applications basées sur Angular, il peut être judicieux d’activer l’édition de documents et la collaboration en temps réel au sein de votre service en intégrant ONLYOFFICE Docs (ONLYOFFICE Document Server). Une telle intégration est possible grâce à un composant unique développé pour le framework Angular par les développeurs d’ONLYOFFICE.

Une fois intégré, le composant vous permet d’installer les éditeurs en ligne ONLYOFFICE et de tester leurs performances au sein de votre environnement Angular. Voici comment vous pouvez procéder.

À propos de ONLYOFFICE Docs

ONLYOFFICE Docs est un progiciel bureautique basé sur le Web qui vous permet de travailler avec des documents texte, des feuilles de calcul, des présentations, des formulaires à remplir et des fichiers PDF dans votre navigateur Web.

La solution est open source et nécessite un déploiement sur site sur un serveur local. Par exemple, il peut être installé sur Debian et Ubuntu ou d’autres distributions basées sur Linux.

ONLYOFFICE Docs offre une interface conviviale et un ensemble complet de fonctionnalités afin que vous puissiez facilement ouvrir et modifier des documents texte, des feuilles de calcul, des présentations et des formulaires à remplir de toute complexité. La suite est entièrement compatible avec les fichiers Microsoft Word, Excel et PowerPoint et prend en charge d’autres formats populaires, y compris ODF.

Vous pouvez utiliser la suite ONLYOFFICE au sein d’ONLYOFFICE Workspace, une plateforme open-source pour le travail collaboratif et la gestion d’équipe, ou l’intégrer à une autre application ou plateforme Web.

Par exemple, vous pouvez intégrer ONLYOFFICE Docs avec Nextcloud, Moodle, Confluence, ownCloud, WordPress, Seafile, SharePoint, Alfresco, Redmine, etc. Le nombre total d’intégrations disponibles est supérieur à 30.

Pour ONLYOFFICE Docs, il existe une application de bureau gratuite pour Windows, Linux et macOS, qui vous permet de travailler avec des documents hors ligne, et des applications mobiles gratuites pour Android et iOS.

ONLYOFFICE Docs fournit une API ouverte et est compatible avec le protocole WOPI, de sorte que les développeurs de logiciels peuvent facilement intégrer la suite dans leurs outils logiciels. À cette fin, il existe une version spéciale appelée ONLYOFFICE Docs Developer Edition.

Installer le composant Angular pour ONLYOFFICE Document Server

Tout d’abord, vous devez avoir ONLYOFFICE Docs (ONLYOFFICE Document Server) installé sur votre serveur. Vous pouvez l’obtenir à partir de GitHub en utilisant les instructions d’installation correspondantes.

Le composant ONLYOFFICE pour le framework Angular est disponible dans le registre npm. C’est pourquoi vous devez l’installer à partir de npm avec cette commande :

$ npm install --save @onlyoffice/document-editor-angular

L’installation du composant à l’aide de fil est également possible. Il suffit d’exécuter cette commande :

$ yarn add @onlyoffice/document-editor-angular

Comment utiliser le composant Angular dans ONLYOFFICE Docs

Une fois l’installation réussie, vous devez importer DocumentEditorModule :

import { NgModule } from '@angular/core';
import { DocumentEditorModule } from "@onlyoffice/document-editor-angular";

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    DocumentEditorAngularModule
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

Après cela, vous devez définir les options suivantes dans votre composant de consommation :

@Component({...})
export class ExampleComponent {
  config: IConfig = {
    document: {
      "fileType": "docx",
      "key": "Khirz6zTPdfd7",
      "title": "Example Document Title.docx",
      "url": "https://example.com/url-to-example-document.docx"
    },
    documentType: "word",
    editorConfig: {
      "callbackUrl": "https://example.com/url-to-callback.ashx"
    },
  }

  onDocumentReady = (event) => {
    console.log("Document is loaded");
  };
}

L’étape suivante consiste à utiliser le composant document-editor avec les options de votre modèle :

<document-editor 
  id="docxForComments" 
  documentServerUrl="http://documentserver/"
  [config]="config"
  [events_onDocumentReady]="onDocumentReady"
></document-editor>

Une description complète de toutes les options disponibles est disponible sur document-editor-angular.

Développement ultérieur

Installez ensuite toutes les dépendances de projet requises :

$ npm install

L’étape suivante consiste à construire le projet lui-même :

$ cd ./projects
ng build @onlyoffice/document-editor-angular

Créez le paquetage de projet :

$ cd ./dist/onlyoffice/document-editor-angular
npm pack

Enfin, testez le composant ONLYOFFICE :

$ cd ./projects
ng test @onlyoffice/document-editor-angular

Voilà! Vous pouvez maintenant voir comment ONLYOFFICE Docs fonctionne dans votre application Angular.

Articles connexes: