# - 使用React组件集成ONLYOFFICE

# 安装 ONLYOFFICE 文档 Angular 组件

在您的项目中从 npm 安装 ONLYOFFICE 文档 Angular 组件。运行命令：

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

或者

yarn add @onlyoffice/document-editor-angular

# 使用 ONLYOFFICE 文档 Angular 组件

请按照以下步骤开始使用该组件：

导入 DocumentEditorModule：

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

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

1
2
3
4
5
6
7
8
9
10
11
12
13

在您的消费组件中定义选项:

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

其中 example.com 是安装了 文档管理器 和 文档存储服务 的服务器的名称。

在模板中，将 document-editor 组件与您的选项一起使用：

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

1
2
3
4
5
6

← - 使用React组件集成ONLYOFFICE