Angulaire est un cadre de développement d’applications frontales gratuit et open source basé sur TypeScript largement utilisé pour créer des applications mobiles natives et créer des applications installées sur le bureau 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 Documents ONLYOFFICE (Serveur de documents ONLYOFFICE). Une telle intégration est possible grâce à un composant unique développé pour le framework Angular par les développeurs ONLYOFFICE.

Lorsqu’il est intégré, le composant vous permet d’installer le UNIQUEMENTBUREAU éditeurs en ligne et testez leurs performances dans votre environnement Angular. Voici comment vous pouvez le faire.

À propos des documents ONLYOFFICE

Documents ONLYOFFICE est un package 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.

Documents ONLYOFFICE offre une interface conviviale et un ensemble complet de fonctionnalités vous permettant d’ouvrir et de modifier facilement 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 le UNIQUEMENTBUREAU suite dans ONLYOFFICE Workspace, une plate-forme open source pour le travail collaboratif et la gestion d’équipe, ou intégrez-la à une autre application ou plate-forme Web.

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

Pour Documents ONLYOFFICEil 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.

Documents ONLYOFFICE fournit ouvert API et est compatible avec le WOPI protocole, afin que les développeurs de logiciels puissent facilement intégrer la suite dans leurs outils logiciels. A cet effet, il existe une version spéciale appelée ONLYOFFICE Docs Édition Développeur.

Installer le composant angulaire pour ONLYOFFICE Document Server

Tout d’abord, vous devez avoir Documents ONLYOFFICE (Serveur de documents ONLYOFFICE) installé sur votre serveur. Vous pouvez l’obtenir de GitHub en utilisant les instructions d’installation correspondantes.

La 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

Installation du composant à l’aide de fil est également possible. Exécutez simplement cette commande :

$ yarn add @onlyoffice/document-editor-angular

Comment utiliser le composant angulaire dans ONLYOFFICE Docs

Après une installation réussie, vous devez importer DocumentEditorModuleDocumentEditorModule:

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 consommateur :

@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 éditeur de documents composant 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 éditeur de document angulaire.

La poursuite du développement

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 package de projet :

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

Enfin, testez le composant ONLYOFFICE :

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

C’est ça! Maintenant vous pouvez voir comment Documents ONLYOFFICE travaille au sein de votre Angulaire application.

Si vous appréciez ce que nous faisons ici sur TecMint, vous devriez considérer :

TecMint est le site communautaire à la croissance la plus rapide et le plus fiable pour tout type d’articles, de guides et de livres Linux sur le Web. Des millions de personnes visitent TecMint ! pour rechercher ou parcourir les milliers d’articles publiés accessibles GRATUITEMENT à tous.

Si vous aimez ce que vous lisez, pensez à nous acheter un café (ou 2) en signe d’appréciation.

Nous sommes reconnaissants pour votre soutien sans fin.