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.