ONLYOFFICE Docs を Angular と統合する方法

Angular は、TypeScript ベースの無料のオープンソースフロントエンドアプリケーション開発フレームワークで、ネイティブモバイルアプリケーションの構築や、Linux、Windows、macOS 用のデスクトップにインストールされるアプリケーションの作成に広く使用されています。

Angular ベースのアプリケーションを開発して実行する場合は、ONLYOFFICE Docs (ONLYOFFICE Document Server) を統合することで、サービス内でのドキュメント編集とリアルタイムコラボレーションを有効にすることをお勧めします。）。このような統合は、ONLYOFFICE 開発者によって Angular フレームワーク用に開発された独自のコンポーネントによって可能になります。

このコンポーネントを統合すると、ONLYOFFICE オンラインエディターをインストールし、Angular 環境内でそのパフォーマンスをテストできるようになります。その方法は次のとおりです。

ONLYOFFICE ドキュメントについて

ONLYOFFICE Docs は、Web ブラウザーでテキストドキュメント、スプレッドシート、プレゼンテーション、入力可能なフォーム、PDF ファイルを操作できる Web ベースのオフィスパッケージです。

このソリューションはオープンソースであり、ローカルサーバー上のオンプレミス展開が必要です。たとえば、Debian や Ubuntu、またはその他の Linux ベースのディストリビューションにインストールできます。

ONLYOFFICE Docs は、ユーザーフレンドリーなインターフェイスと完全な機能セットを提供し、テキストドキュメント、スプレッドシート、プレゼンテーション、およびあらゆる複雑な入力可能なフォームを開いて編集することができます。このスイートは Microsoft Word、Excel、PowerPoint ファイルと完全な互換性があり、ODF などの他の一般的な形式もサポートしています。

ONLYOFFICE Workspace 内の ONLYOFFICE スイートは、共同作業とチーム管理のためのオープンソースプラットフォームで使用したり、別の Web ベースのアプリやプラットフォームと統合したりできます。

たとえば、ONLYOFFICE Docs を Nextcloud、Moodle、Confluence、ownCloud、WordPress、Seafile、SharePoint、Alfresco、Redmine などと統合できます。利用可能な統合の総数は 30 を超えています。

ONLYOFFICE Docs には、ドキュメントをオフラインで操作できる Windows、Linux、macOS 用の無料デスクトップアプリと、Android および iOS 用の無料モバイルアプリがあります。

ONLYOFFICE Docs はオープンな API を提供し、WOPI プロトコルと互換性があるため、ソフトウェア開発者はスイートをソフトウェアツールに簡単に組み込むことができます。この目的のために、ONLYOFFICE Docs Developer Edition と呼ばれる特別なバージョンがあります。

ONLYOFFICE Document Server の Angular コンポーネントをインストールする

まず、ONLYOFFICE Docs (ONLYOFFICE Document Server) をサーバーにインストールする必要があります。対応するインストール手順を使用して、GitHub から入手できます。

Angular フレームワークの ONLYOFFICE コンポーネントは、npm レジストリで入手できます。このため、次のコマンドを使用して npm からインストールする必要があります。

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 { }

その後、使用するコンポーネントで次のオプションを定義する必要があります。

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

次のステップでは、テンプレートのオプションを指定してドキュメントエディター コンポーネントを使用します。

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

利用可能なすべてのオプションの詳細な説明は、 document-editor-angular で参照できます。

さらなる発展

次に、必要なプロジェクトの依存関係をすべてインストールします。

npm install

次のステップは、プロジェクト自体をビルドすることです。

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

プロジェクトパッケージを作成します。

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

最後に、ONLYOFFICE コンポーネントをテストします。

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

それでおしまい！これで、Angular アプリ内で ONLYOFFICE Docs がどのように動作するかを確認できます。