Giunsa Pag-integrate ang ONLYOFFICE Docs sa Angular


Ang Angular usa ka TypeScript-based nga libre ug open-source front-end application development framework kay kaylap nga gigamit alang sa pagtukod sa lumad nga mobile applications ug paghimo sa desktop-installed apps para sa Linux, Windows, ug macOS.

Kung imong gipalambo ug gipadagan ang mga aplikasyon nga nakabase sa Angular, mahimo’g maayo nga ideya nga hatagan ang pag-edit sa dokumento ug pagtinabangay sa tinuud nga oras sa sulod sa imong serbisyo pinaagi sa paghiusa sa ONLYOFFICE Docs (ONLYOFFICE Document Server). Ang ingon nga panagsama posible tungod sa usa ka talagsaon nga sangkap nga gihimo alang sa Angular nga balangkas sa mga nag-develop sa ONLYOFFICE.

Kung gisagol, gitugotan ka sa sangkap nga i-install ang ONLYOFFICE online nga mga editor ug sulayan ang ilang nahimo sa sulod sa imong Angular nga palibot. Ania kung giunsa nimo kini mahimo.

Mahitungod sa ONLYOFFICE Docs

PDF nga mga file sa imong web browser.

Ang solusyon mao ang open-source ug nagkinahanglan sa on-premises deployment sa usa ka lokal nga server. Pananglitan, mahimo kini ma-install sa Debian ug Ubuntu o uban pang mga distro nga nakabase sa Linux.

Ang ONLYOFFICE Docs nagtanyag ug user-friendly nga interface ug usa ka kompletong hugpong sa mga feature aron dali nimo maablihan ug ma-edit ang mga dokumento sa teksto, spreadsheet, presentasyon, ug mapuno nga mga porma sa bisan unsang pagkakomplikado. Ang suite hingpit nga nahiuyon sa mga file sa Microsoft Word, Excel, ug PowerPoint ug nagsuporta sa ubang mga sikat nga format, lakip ang ODF.

Mahimo nimong gamiton ang ONLYOFFICE suite sulod sa ONLYOFFICE Workspace, usa ka open-source nga plataporma alang sa kolaborasyon nga trabaho ug pagdumala sa team, o i-integrate kini sa laing web-based nga app o plataporma.

Pananglitan, mahimo nimong i-integrate ang ONLYOFFICE Docs sa Alfresco, Redmine, ug uban pa. Ang kinatibuk-ang gidaghanon sa magamit nga mga panagsama labaw pa sa 30.

Para sa ONLYOFFICE Docs, adunay libre nga desktop app para sa Windows, Linux, ug macOS, nga nagtugot kanimo sa pagtrabaho uban sa mga dokumento offline, ug libre nga mobile apps para sa Android ug iOS.

Ang ONLYOFFICE Docs naghatag og bukas nga API ug nahiuyon sa WOPI protocol, aron ang mga developers sa software dali nga ma-embed ang suite sa ilang mga himan sa software. Alang niini nga katuyoan, adunay espesyal nga bersyon nga gitawag ONLYOFFICE Docs Developer Edition.

I-install ang Angular Component para sa ONLYOFFICE Document Server

Una sa tanan, kinahanglan nimo nga adunay ONLYOFFICE Docs (ONLYOFFICE Document Server) nga na-install sa imong server. Mahimo nimo kini makuha gikan sa GitHub gamit ang katugbang nga mga panudlo sa pag-install.

Ang ONLYOFFICE component alang sa Angular framework anaa sa npm Registry. Mao nga kinahanglan nimo nga i-install kini gikan sa npm gamit kini nga mando:

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

Posible usab ang pag-instalar sa sangkap gamit ang hilo. Pagdagan lang kini nga mando:

$ yarn add @onlyoffice/document-editor-angular

Giunsa Paggamit ang Angular nga Component sa ONLYOFFICE Docs

Human sa malampuson nga pag-instalar, kinahanglan nimo nga i-import ang DocumentEditorModule:

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

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

Pagkahuman niana, kinahanglan nimo nga ipasabut ang mga mosunud nga kapilian sa imong gikonsumo nga sangkap:

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

Ang sunod nga lakang mao ang paggamit sa sangkap nga editor sa dokumento nga adunay mga kapilian sa imong template:

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

Ang usa ka kompleto nga paghulagway sa tanan nga magamit nga mga kapilian magamit sa dokumento-editor-angular.

Dayon i-install ang tanan nga gikinahanglan nga mga dependency sa proyekto:

$ npm install

Ang sunod nga lakang mao ang pagtukod sa proyekto mismo:

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

Paghimo sa package sa proyekto:

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

Sa katapusan, sulayi ang ONLYOFFICE component:

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

Mao na! Karon imong makita kung giunsa ang ONLYOFFICE Docs nagtrabaho sulod sa imong Angular app.