Kako integrirati ONLYOFFICE Docs s Angularom


Angular je besplatni okvir za razvoj front-end aplikacija temeljen na TypeScriptu koji se široko koristi za izradu izvornih mobilnih aplikacija i kreiranje aplikacija instaliranih na stolnoj površini za Linux, Windows i macOS.

Ako razvijate i pokrećete aplikacije temeljene na Angularu, možda bi bilo dobro omogućiti uređivanje dokumenata i suradnju u stvarnom vremenu unutar vaše usluge integracijom ONLYOFFICE Docs (ONLYOFFICE Document Server). Takva integracija moguća je zahvaljujući jedinstvenoj komponenti razvijenoj za okvir Angular od strane programera ONLYOFFICE.

Kada je integrirana, komponenta vam omogućuje da instalirate ONLYOFFICE online editore i testirate njihovu izvedbu unutar vašeg Angular okruženja. Evo kako to možete učiniti.

O ONLYOFFICE Dokumentima

PDF datoteke u vašem web pregledniku.

Rješenje je otvorenog koda i zahtijeva lokalnu implementaciju na lokalnom poslužitelju. Na primjer, može se instalirati na Debian i Ubuntu ili druge distribucije temeljene na Linuxu.

ONLYOFFICE Docs nudi korisničko sučelje i kompletan skup značajki tako da možete jednostavno otvarati i uređivati tekstualne dokumente, proračunske tablice, prezentacije i obrasce bilo koje složenosti koji se mogu ispuniti. Paket je potpuno kompatibilan s Microsoft Word, Excel i PowerPoint datotekama i podržava druge popularne formate, uključujući ODF.

Možete koristiti ONLYOFFICE paket unutar ONLYOFFICE Workspacea, platforme otvorenog koda za kolaborativni rad i upravljanje timom, ili ga integrirati s drugom web aplikacijom ili platformom.

Na primjer, možete integrirati ONLYOFFICE Docs s Alfresco, Redmine i tako dalje. Ukupan broj dostupnih integracija veći je od 30.

Za ONLYOFFICE Docs postoji besplatna desktop aplikacija za Windows, Linux i macOS, koja vam omogućuje izvanmrežni rad s dokumentima, te besplatne mobilne aplikacije za Android i iOS.

ONLYOFFICE Docs pruža otvoreni API i kompatibilan je s WOPI protokolom, tako da programeri softvera mogu jednostavno ugraditi paket u svoje softverske alate. U tu svrhu postoji posebna verzija pod nazivom ONLYOFFICE Docs Developer Edition.

Instalirajte Angular komponentu za ONLYOFFICE poslužitelj dokumenata

Prije svega, trebate imati instaliran ONLYOFFICE Docs (ONLYOFFICE Document Server) na vašem poslužitelju. Možete ga nabaviti s GitHuba koristeći odgovarajuće upute za instalaciju.

ONLYOFFICE komponenta za Angular framework dostupna je u npm registru. Zato ga trebate instalirati iz npm-a ovom naredbom:

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

Moguća je i ugradnja komponente pomoću pređe. Samo pokrenite ovu naredbu:

$ yarn add @onlyoffice/document-editor-angular

Kako koristiti kutnu komponentu u dokumentima ONLYOFFICE

Nakon uspješne instalacije potrebno je uvesti DocumentEditorModule:

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

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

Nakon toga trebate definirati sljedeće opcije u svojoj potrošnoj komponenti:

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

Sljedeći korak je korištenje komponente uređivača dokumenata s opcijama u vašem predlošku:

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

Potpuni opis svih dostupnih opcija dostupan je na document-editor-angular.

Zatim instalirajte sve potrebne ovisnosti projekta:

$ npm install

Sljedeći korak je izrada samog projekta:

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

Napravite projektni paket:

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

Na kraju testirajte ONLYOFFICE komponentu:

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

To je to! Sada možete vidjeti kako ONLYOFFICE Docs funkcionira unutar vaše Angular aplikacije.