Wéi Integréiert ONLYOFFICE Docs mat Angular

Angular ass en TypeScript-baséiert gratis an Open-Source Front-End Applikatioun Entwécklung Kader wäit benotzt fir gebierteg mobil Uwendungen ze bauen an Desktop-installéiert Apps fir Linux, Windows a MacOS ze kreéieren.

Wann Dir Angular-baséiert Uwendungen entwéckelt a leeft, ass et vläicht eng gutt Iddi fir Dokumenterännerung an Echtzäit Zesummenaarbecht bannent Ärem Service z'erméiglechen andeems Dir ONLYOFFICE Docs (ONLYOFFICE Document Server) integréiert. Esou Integratioun ass méiglech wéinst engem eenzegaartege Bestanddeel fir de Angular Kader vun den ONLYOFFICE Entwéckler entwéckelt.

Wann integréiert, erlaabt de Komponent Iech d'ONLYOFFICE Online Redaktoren z'installéieren an hir Leeschtung an Ärem Angular Ëmfeld ze testen. Hei ass wéi Dir et maache kënnt.

Iwwer ONLYOFFICE Docs

PDF Dateien an Ärem Webbrowser.

D'Léisung ass Open-Source a erfuerdert on-premises Deployment op engem lokale Server. Zum Beispill kann et op Debian an Ubuntu oder aner Linux-baséiert Distros installéiert ginn.

ONLYOFFICE Docs bitt e userfrëndlechen Interface an e komplette Set vu Featuren, sou datt Dir Textdokumenter, Spreadsheets, Presentatiounen a fëlltbare Forme vun all Komplexitéit einfach opmaache kënnt an z'änneren. D'Suite ass komplett kompatibel mat Microsoft Word, Excel, a PowerPoint Dateien an ënnerstëtzt aner populär Formater, dorënner ODF.

Dir kënnt d'ONLYOFFICE Suite am ONLYOFFICE Workspace benotzen, eng Open Source Plattform fir kollaborativ Aarbecht an Teammanagement, oder se mat enger anerer webbaséierter App oder Plattform integréieren.

Zum Beispill kënnt Dir ONLYOFFICE Docs mat Alfresco, Redmine, asw. D'total Zuel vun verfügbaren Integratiounen ass méi wéi 30.

Fir ONLYOFFICE Docs gëtt et eng gratis Desktop-App fir Windows, Linux a macOS, déi Iech erlaabt mat Dokumenter offline ze schaffen, a gratis mobil Apps fir Android an iOS.

ONLYOFFICE Docs liwwert oppen API an ass kompatibel mam WOPI Protokoll, sou datt Software Entwéckler d'Suite einfach an hir Software Tools kënnen embeden. Fir dësen Zweck gëtt et eng speziell Versioun genannt ONLYOFFICE Docs Developer Edition.

Installéiert Angular Komponent fir ONLYOFFICE Document Server

Als éischt musst Dir ONLYOFFICE Docs (ONLYOFFICE Document Server) op Ärem Server installéiert hunn. Dir kënnt et vu GitHub kréien andeems Dir déi entspriechend Installatiounsinstruktiounen benotzt.

Den ONLYOFFICE Komponent fir de Angular Kader ass verfügbar am npm Registry. Dofir musst Dir et vun npm mat dësem Kommando installéieren:

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

Installatioun vun der Komponent mat Garn ass och méiglech. Gitt einfach dëse Kommando aus:

$ yarn add @onlyoffice/document-editor-angular

Wéi benotzen ech Angular Komponent an ONLYOFFICE Docs

No der erfollegräicher Installatioun musst Dir DocumentEditorModule importéieren:

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

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

Duerno musst Dir déi folgend Optiounen an Ärem Konsumkomponent definéieren:

@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");
  };
}

De nächste Schrëtt ass den Dokument Editor Komponent mat den Optiounen an Ärer Schabloun ze benotzen:

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

Eng komplett Beschreiwung vun all verfügbaren Optiounen ass verfügbar am Document-Editor-Angular.

Installéiert dann all déi erfuerderlech Projetabhängegkeeten:

$ npm install

De nächste Schrëtt ass de Projet selwer ze bauen:

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

Erstellt de Projet Package:

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

Endlech, test den ONLYOFFICE Komponent:

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

Dat ass et! Elo kënnt Dir gesinn wéi ONLYOFFICE Docs an Ärer Angular App funktionnéiert.