Hvernig á að samþætta ONLYOFFICE Docs við Angular

Angular er TypeScript byggt ókeypis og opinn uppspretta framhlið forritaþróunarramma sem er mikið notað til að byggja innfædd farsímaforrit og búa til skjáborðsuppsett forrit fyrir Linux, Windows og macOS.

Ef þú þróar og keyrir Angular-undirstaða forrit gæti verið góð hugmynd að virkja skjalavinnslu og rauntíma samvinnu innan þjónustu þinnar með því að samþætta ONLYOFFICE Docs (ONLYOFFICE Document Server). Slík samþætting er möguleg vegna einstaks íhluts sem þróaður er fyrir Angular rammann af ONLYOFFICE hönnuðunum.

Þegar hann er samþættur gerir íhluturinn þér kleift að setja upp ONLYOFFICE ritstjórana á netinu og prófa frammistöðu þeirra innan Angular umhverfisins þíns. Hér er hvernig þú getur gert það.

Um ONLYOFFICE Docs

PDF skrár í vafranum þínum.

Lausnin er opinn og krefst dreifingar á staðnum á staðbundnum netþjóni. Til dæmis er hægt að setja það upp á Debian og Ubuntu eða öðrum Linux-byggðum dreifingum.

ONLYOFFICE Docs býður upp á notendavænt viðmót og fullkomið sett af eiginleikum þannig að þú getur auðveldlega opnað og breytt textaskjölum, töflureiknum, kynningum og útfyllanlegum eyðublöðum af öllum flóknum hætti. Svítan er fullkomlega samhæf við Microsoft Word, Excel og PowerPoint skrár og styður önnur vinsæl snið, þar á meðal ODF.

Þú getur notað ONLYOFFICE föruneytið innan ONLYOFFICE Workspace, opinn uppspretta vettvang fyrir samstarfsvinnu og teymisstjórnun, eða samþætt hana við annað vefforrit eða vettvang.

Til dæmis geturðu samþætt ONLYOFFICE Docs við Alfresco, Redmine og svo framvegis. Heildarfjöldi tiltækra samþættinga er meira en 30.

Fyrir ONLYOFFICE Docs er ókeypis skrifborðsforrit fyrir Windows, Linux og macOS, sem gerir þér kleift að vinna með skjöl án nettengingar og ókeypis farsímaforrit fyrir Android og iOS.

ONLYOFFICE Docs býður upp á opið API og er samhæft við WOPI samskiptareglur, svo hugbúnaðarframleiðendur geta auðveldlega fellt svítuna inn í hugbúnaðarverkfærin sín. Í þessu skyni er til sérstök útgáfa sem heitir ONLYOFFICE Docs Developer Edition.

Settu upp Angular Component fyrir ONLYOFFICE Document Server

Fyrst af öllu þarftu að hafa ONLYOFFICE Docs (ONLYOFFICE Document Server) uppsett á netþjóninum þínum. Þú getur fengið það frá GitHub með því að nota samsvarandi uppsetningarleiðbeiningar.

ONLYOFFICE hluti fyrir Angular ramma er fáanlegur í npm Registry. Þess vegna þarftu að setja það upp frá npm með þessari skipun:

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

Uppsetning á íhlutnum með garni er einnig möguleg. Keyrðu bara þessa skipun:

$ yarn add @onlyoffice/document-editor-angular

Hvernig á að nota Angular Component í ONLYOFFICE Docs

Eftir vel heppnaða uppsetningu þarftu að flytja inn DocumentEditorModule:

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

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

Eftir það þarftu að skilgreina eftirfarandi valkosti í neysluhlutanum þínum:

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

Næsta skref er að nota skjalaritarahlutann með valmöguleikunum í sniðmátinu þínu:

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

Full lýsing á öllum tiltækum valkostum er fáanleg á document-editor-angular.

Settu síðan upp allar nauðsynlegar verkefnaháðar:

$ npm install

Næsta skref er að byggja verkefnið sjálft:

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

Búðu til verkefnapakkann:

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

Að lokum skaltu prófa ONLYOFFICE íhlutinn:

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

Það er það! Nú geturðu séð hvernig ONLYOFFICE Docs virkar í Angular appinu þínu.