ONLYOFFICE DocsをReactベースのサービスに連携する方法

React環境でONLYOFFICEオンラインエディタを簡単にデプロイするためのフレームワークコンポーネントをリリースしました。詳しくはこの投稿をご覧ください。

シームレスなフレームワーク連携

今後、ONLYOFFICE Docs（Document Server）は、Reactをベースとしたサービスやプラットフォームと簡単に統合することができます。新しくリリースされた各フレームワーク用のコンポーネントのおかげで、私たちのオンラインエディタが皆さまの環境でどのように動作するか、より少ない労力でインストールし、テストすることが可能です。

開始方法

フレームワークコンポーネントは、npmレジストリで利用可能です。

npmからコンポーネントをインストールするには、対応するフレームワークについて、以下のコマンドを実行してください。

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

または、次のコマンドを実行してください。

yarn add @onlyoffice/document-editor-react

使用方法

コンポーネントの使用例を以下に示します。

...
import { DocumentEditor } from "@onlyoffice/document-editor-react";
...
...
var onDocumentReady = function (event) {
    console.log("Document is loaded");
};
...
...
<DocumentEditor
  id="docxEditor"
  documentServerUrl="http://documentserver/"
  config={{
    "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"
    }
  }}
  events_onDocumentReady={onDocumentReady}
/>
...

API

名前	種類	デフォルト	必須	詳細
id	string	null	yes	コンポーネント固有の識別子
documentServerUrl	string	null	yes	ONLYOFFICEドキュメントサーバーのアドレス
config	object	null	yes	トークンでファイルを開くための汎用的な設定オブジェクト。設定API
document_fileType	string	null	no	ファイルの種類
document_title	string	null	no	ファイルの名前
documentType	string	null	no	文書の種類
height	string	null	no	ブラウザウィンドウにおける文書の高さを定義する
type	string	null	no	文書へのアクセスに使用されるプラットフォームの種類を定義する（デスクトップ、モバイル、埋め込み）
width	string	null	no	ブラウザウィンドウでの文書の幅を定義する
events_onAppReady	(event: object) => void	null	no	アプリケーションがブラウザに読み込まれたときに呼び出される関数
events_onDocumentStateChange	(event: object) => void	null	no	文書が変更されたときに呼び出される関数
events_onMetaChange	(event: object) => void	null	no	meta コマンドにより文書のメタ情報が変更されたときに呼び出される関数
events_onDocumentReady	(event: object) => void	null	no	文書がドキュメントエディタに読み込まれたときに呼び出される関数
events_onInfo	(event: object) => void	null	no	アプリケーションがファイルを開いたときに呼び出される関数
events_onWarning	(event: object) => void	null	no	警告が発生したときに呼び出される関数
events_onError	(event: object) => void	null	no	エラーなど特定の事象が発生したときに呼び出される関数
events_onRequestSharingSettings	(event: object) => void	null	no	ユーザーが「アクセス権の変更」ボタンをクリックして、文書のアクセス権を管理しようとしたときに呼び出される関数
events_onRequestRename	(event: object) => void	null	no	ユーザーが「名前の変更」ボタンをクリックしてファイル名を変更しようとしたときに呼び出される関数
events_onMakeActionLink	(event: object) => void	null	no	ユーザーがブックマークを含む文書を開くためのリンクを取得しようとするときに、ブックマーク位置までスクロールして呼び出される関数
events_onRequestInsertImage	(event: object) => void	null	no	ユーザーが 「ストレージからの画像」ボタンをクリックして画像を挿入しようとしたときに呼び出される関数
events_onRequestSaveAs	(event: object) => void	null	no	ユーザーが「名前を付けてコピーを保存」ボタンをクリックしてファイルを保存しようとしたときに呼び出される関数
events_onRequestMailMergeRecipients	(event: object) => void	null	no	ユーザーがメールマージボタンをクリックして受信者データを選択しようとしたときに呼び出される関数
events_onRequestCompareFile	(event: object) => void	null	no	ユーザーが「ストレージからの文書」ボタンをクリックして比較するドキュメントを選択しようとしたときに呼び出される関数
events_onRequestEditRights	(event: object) => void	null	no	ユーザーが「文書の編集」ボタンをクリックして、文書を閲覧モードから編集モードに切り替えようとしたときに呼び出される関数
events_onRequestHistory	(event: object) => void	null	no	ユーザーがバージョン履歴ボタンをクリックして文書のバージョン履歴を表示しようとしたときに呼び出される関数
events_onRequestHistoryClose	(event: object) => void	null	no	ユーザーが文書のバージョン履歴を閲覧しているときに、履歴を閉じるボタンで文書に戻ろうとしたときに呼び出される関数
events_onRequestHistoryData	(event: object) => void	null	no	ユーザーが文書バージョン履歴の中の特定の文書バージョンをクリックしようとしたときに呼び出される関数
events_onRequestRestore	(event: object) => void	null	no	ユーザーがバージョン履歴の復元ボタンをクリックして、ファイルのバージョンを復元しようとしたときに呼び出される関数

ストーリーブック

config/default.jsonファイルのドキュメントサーバーのアドレスを変更します。

"documentServerUrl": "http://documentserver/"

ストーリーブックを構築する

yarn build-storybook

ストーリーブックを開始する

yarn storybook

開発

GitHubのリポジトリからプロジェクトをクローンする

git clone https://github.com/ONLYOFFICE/document-editor-react

プロジェクトの依存関係をインストールする

yarn install

コンポーネントをテストする

yarn test

プロジェクトをビルドする

yarn rollup

パッケージを作成する

npm pack