ngx-onlyoffice
TypeScript icon, indicating that this package has built-in type declarations

0.0.9 • Public • Published

ngx-onlyoffice

Available on npm License GitHub last commit Maintenance Dependabot Status

This ONLYOFFICE wrapper for Angular displays the ONLYOFFICE viewer or editor in your Angular application.

Note, that you have to host the server yourself.

Installation

Type npm i ngx-onlyoffice in your command prompt.

Usage

See below or refer to the example.

Include the module in your app.module.ts.

import { NgModule } from "@angular/core";
import { BrowserModule } from "@angular/platform-browser";
import { NgxOnlyOfficeModule } from "ngx-onlyoffice";  // <-- here
import { AppRoutingModule } from "./app-routing.module";
import { AppComponent } from "./app.component";
 
@NgModule({
  bootstrap: [AppComponent],
  declarations: [
    AppComponent,
    ...
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    NgxOnlyOfficeModule, // <-- and here
    ...
  ],
  providers: [],
})
export class AppModule { }

Use in your template:

<onlyoffice [config]="myConfig"></onlyoffice>

An example config:

public myConfig = {
    /*
        editorConfig is the original config for onlyoffice, see docs under https://api.onlyoffice.com/editors/config/document
    */
    editorConfig: { 
      document: {
        fileType: "docx",
        info: {
          author: "Me",
          created: "26.11.19",
        },
        key: "3277238458",
        permissions: {
          download: true,
          edit: true,
        },
        title: "TestTitle",
        url: "example.com",
      },
      documentType: "text",
      editorConfig: {
        embedded: {
          embedUrl: "example.com",
          saveUrl: "example.com",
          shareUrl: "example.com",
          toolbarDocked: "top",
        },
        lang: "en",
        mode: "edit",
      },
      events: {
        onBack: console.log,
        onDocumentStateChange: console.log,
        onError: console.log,
        onReady: console.log,
        onRequestEditRights: console.log,
        onSave: console.log,
      },
      height: "100%",
      type: "desktop",
      width: "100%",
    },
    script: "https://office.example-server/web-apps/apps/api/documents/api.js", // <-- This is the api script URL.
  };

Config Changes

When you change the config, the editor will reload automatically. For this to work, you need to replace the entire config object. Just changing one property won't trigger a reload. Example:

// wrong
this.config.editorConfig.document.title = "New Title";
 
// right
this.config = {
  editorConfig: {
    document: {
      title: "New title",
      ...
    },
    ...
  },
  ...
}

Note that here you have to specify the whole configuration object, just some properties won't work.

However, if you just want to change some properties, you can use Object.assign like so:

this.config = Object.assign({}, this.config, {
    editorConfig: {
        title: "New Title"
    }
})

License

MIT

Readme

Keywords

none

Package Sidebar

Install

npm i ngx-onlyoffice

Weekly Downloads

305

Version

0.0.9

License

MIT

Unpacked Size

40.2 kB

Total Files

17

Last publish

Collaborators

  • hrueger