Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/hrueger/ngx-onlyoffice
An OnlyOffice wrapper library for Angular.
https://github.com/hrueger/ngx-onlyoffice
angular editor ngx onlyoffice wysiwyg
Last synced: 13 days ago
JSON representation
An OnlyOffice wrapper library for Angular.
- Host: GitHub
- URL: https://github.com/hrueger/ngx-onlyoffice
- Owner: hrueger
- License: mit
- Created: 2019-11-26T04:12:59.000Z (about 5 years ago)
- Default Branch: master
- Last Pushed: 2022-12-04T22:04:16.000Z (about 2 years ago)
- Last Synced: 2024-10-12T04:22:46.832Z (4 months ago)
- Topics: angular, editor, ngx, onlyoffice, wysiwyg
- Language: TypeScript
- Homepage:
- Size: 1.8 MB
- Stars: 7
- Watchers: 2
- Forks: 7
- Open Issues: 12
-
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
README
# `ngx-onlyoffice`
[](./LICENSE)
[](https://github.com/hrueger/ngx-onlyoffice/commits)
[](https://github.com/hrueger/ngx-onlyoffice/commits)
[](https://dependabot.com)
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](https://github.com/hrueger/ngx-onlyoffice/tree/master/projects/example/src/app).
Include the module in `your app.module.ts`.
```typescript
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:
```html
```
An example config:
```typescript
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:
```TypeScript
// 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:
```TypeScript
this.config = Object.assign({}, this.config, {
editorConfig: {
title: "New Title"
}
})
```
## License
MIT