Kako integrirati ONLYOFFICE Docs s Angularom


Angular besplatni je okvir za razvoj sučeljnjih aplikacija temeljen na TypeScriptu i otvorenog koda koji se široko koristi za izradu izvornih mobilnih aplikacija i kreiranje aplikacija instaliranih na stolnom računalu 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 uređivače i testirate njihovu izvedbu unutar vašeg Angular okruženja. Evo kako to možete učiniti.

O ONLYOFFICE Dokumentima

ONLYOFFICE Docs je uredski paket temeljen na webu koji vam omogućuje rad s tekstualnim dokumentima, proračunskim tablicama, prezentacijama, obrascima koji se mogu ispuniti i PDF datotekama 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 paket ONLYOFFICE 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 Nextcloud, Moodle, Confluence, ownCloud, WordPress, Seafile, SharePoint, Alfresco, Redmine itd. Ukupan broj dostupnih integracija veći je od 30.

Za ONLYOFFICE Docs postoji besplatna aplikacija za stolna računala 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 ONLYOFFICE Docs (ONLYOFFICE Document Server) instaliran 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 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, trebate 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.

Daljnji razvoj

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 radi unutar vaše aplikacije Angular.