Kuinka integroida ONLYOFFICE-dokumentit Angulariin


Angular on TypeScript-pohjainen ilmainen ja avoimen lähdekoodin käyttöliittymäsovelluskehityskehys, jota käytetään laajasti natiivimobiilisovellusten ja työpöydälle asennettujen sovellusten luomiseen Linuxille, Windowsille ja macOS:lle.

Jos kehität ja käytät Angular-pohjaisia sovelluksia, saattaa olla hyvä idea ottaa käyttöön asiakirjojen muokkaus ja reaaliaikainen yhteistyö palvelussasi integroimalla ONLYOFFICE Docs (ONLYOFFICE Document Server). ). Tällainen integrointi on mahdollista ONLYOFFICE-kehittäjien Angular-kehystä varten kehittämän ainutlaatuisen komponentin ansiosta.

Integroituna komponentin avulla voit asentaa ONLYOFFICE-verkkoeditorit ja testata niiden suorituskykyä Angular-ympäristössäsi. Näin voit tehdä sen.

Tietoja ONLYOFFICE Docsista

ONLYOFFICE Docs on verkkopohjainen toimistopaketti, jonka avulla voit käsitellä tekstiasiakirjoja, laskentataulukoita, esityksiä, täytettäviä lomakkeita ja PDF-tiedostoja verkkoselaimessasi.

Ratkaisu on avoimen lähdekoodin lähde ja vaatii paikallisen käyttöönoton paikallisessa palvelimessa. Se voidaan asentaa esimerkiksi Debianiin ja Ubuntuun tai muihin Linux-pohjaisiin distroihin.

ONLYOFFICE Docs tarjoaa käyttäjäystävällisen käyttöliittymän ja täydellisen joukon ominaisuuksia, joiden avulla voit helposti avata ja muokata monimutkaisia tekstidokumentteja, laskentataulukoita, esityksiä ja täytettäviä lomakkeita. Sarja on täysin yhteensopiva Microsoft Word-, Excel- ja PowerPoint-tiedostojen kanssa ja tukee muita suosittuja muotoja, mukaan lukien ODF.

Voit käyttää ONLYOFFICE -pakettia ONLYOFFICE Workspacessa, avoimen lähdekoodin alustassa yhteistyöhön ja tiiminhallintaan, tai integroida sen toiseen verkkopohjaiseen sovellukseen tai alustaan.

Voit esimerkiksi integroida ONLYOFFICE Docsin Nextcloudin, Moodlen, Confluencen, ownCloudin, WordPressin, Seafilen, SharePointin, Alfrescon, Redminen ja niin edelleen kanssa. Saatavilla olevien integraatioiden kokonaismäärä on yli 30.

ONLYOFFICE Docsille on ilmainen työpöytäsovellus Windowsille, Linuxille ja macOS:lle, jonka avulla voit käsitellä asiakirjoja offline-tilassa, sekä ilmaiset mobiilisovellukset Androidille ja iOS:lle.

ONLYOFFICE Docs tarjoaa avoimen API:n ja on yhteensopiva WOPI-protokollan kanssa, joten ohjelmistokehittäjät voivat helposti upottaa paketin ohjelmistotyökaluihinsa. Tätä tarkoitusta varten on olemassa erityinen versio nimeltä ONLYOFFICE Docs Developer Edition.

Asenna Angular Component for ONLYOFFICE Document Server

Ensinnäkin palvelimellesi täytyy olla asennettuna ONLYOFFICE Docs (ONLYOFFICE Document Server). Saat sen GitHubista vastaavien asennusohjeiden avulla.

Angular-kehyksen ONLYOFFICE-komponentti on saatavilla npm-rekisterissä. Siksi sinun on asennettava se osoitteesta npm tällä komennolla:

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

Komponentin asentaminen langalla on myös mahdollista. Suorita vain tämä komento:

yarn add @onlyoffice/document-editor-angular

Kulmakomponentin käyttäminen ONLYOFFICE Docsissa

Onnistuneen asennuksen jälkeen sinun on tuotava DocumentEditorModule:

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

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

Tämän jälkeen sinun on määritettävä seuraavat asetukset kuluttavassa komponentissa:

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

Seuraava vaihe on käyttää dokumenttieditori-komponenttia mallissasi olevien vaihtoehtojen kanssa:

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

Täydellinen kuvaus kaikista käytettävissä olevista vaihtoehdoista on saatavilla osoitteessa document-editor-angular.

Edelleen kehittäminen

Asenna sitten kaikki tarvittavat projektiriippuvuudet:

npm install

Seuraava askel on rakentaa itse projekti:

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

Luo projektipaketti:

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

Testaa lopuksi ONLYOFFICE-komponentti:

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

Se siitä! Nyt voit nähdä, kuinka ONLYOFFICE Docs toimii Angular-sovelluksessasi.