ONLYOFFICE’s diary

OSSドキュメントエディタの使い方やヒントをご紹介します

SPA（シングルページアプリケーション）で動作するONLYOFFICE Docs

ONLYOFFICE Docsは、あなたのプロジェクトのためのパワフルで多機能なソリューションです。デモ用のシングルページアプリケーションに簡単に統合することができます。このブログ記事では、ONLYOFFICE DocsをSPAに統合する方法をご紹介します。

https://www.onlyoffice.com/blog/wp-content/uploads/2022/08/Illyustratsiya_bez_nazvaniya_1661778549.png

前提条件

始める前に、必要なコンポーネントがすべて準備されていることを確認しましょう。統合を成功させるためには、以下のものが必要です。

  • ONLYOFFICE Docsサーバーを実行する。
  • 私たちのSPAにドキュメントを提供できるサーバー。
  • ONLYOFFICE Docsを使用する予定のSPA。

このプロジェクトでは、DockerコンテナとしてONLYOFFICE Docsをインストールし、実行します。これは最も簡単で最速のインストールオプションです。しかし、他のインストール方法もあります。

SPAインデックスページのセットアップ

次に、SPAをセットアップする必要があります。私たちは、ドキュメント、スプレッドシート、プレゼンテーションを同じページに表示する予定です。これを行うには、プレースホルダー div にそれらを埋め込み、対応するボタンをクリックすると要求されたエディタを表示します。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <script type="text/javascript" src="https://documentserver/web-apps/apps/api/documents/api.js"></script>
    <title>ONLYOFFICE Api Documentation</title>
</head>
<body>
    <header>
        <a href="/"><img src="Images/logo.png" alt="ONLYOFFICE" /></a>
    </header>
    <h1>ONLYOFFICE Docs can be easily integrated into your web page!<br>Let`s see how it works!</h1></h1>
    
    <div class="center">
        <button type="button" id="docx" class="buttons">DOCX</button>
        <button type="button" id="xlsx" class="buttons">XLSX</button>
        <button type="button" id="pptx" class="buttons">PPTX</button>  
    </div>
    <div class = editors>
        <div id="placeholder"></div>
    </div>
     <script type="text/javascript" src="script.js"></script>
</body>
</html>

注意! ヘッダー部では、SPAとDocument Server APIメソッドを接続しました。ここで、https://documentserver/ は、ONLYOFFICE Document Server がインストールされているサーバーの名前です。

SPAの設定

次に、SPA で表示されるドキュメントの設定を行う JavaScript ファイルを作成します。

ここでは、ドキュメントエディターの設定を行います。

  window.docEditor = new DocsAPI.DocEditor("placeholder",
        {
            "document": {
                "fileType": "docx",
                "key": "W8FAFC9C22A8",
                "title": "Example Document Title.",
                "url": "https://example.com/url-to-example-document.docx"
            },
            "documentType": "word",
            "height": "100%",
            "width": "100%"
        });

ドキュメントセクションでは、fileType、key、title、urlの各パラメータを指定します。

  • fileType パラメータは、ドキュメントの種類を指定します。
  • key パラメータは、サービスがドキュメントを認識するために使用する一意の識別子を定義します。 * title パラメータはドキュメントの名前を指定します。この名前は、ドキュメントがダウンロードされるときにファイル名としても使用されます。

  • url パラメータは、ソースドキュメントが格納される絶対URLを定義します。 基本セクションでは、documentType、height、width を設定する。

  • documentType パラメータは、開くドキュメントの種類を定義する。

word 指定はテキスト文書を開く場合に使用する。

cell 指定は、スプレッドシートに対応する。

slide 指定はプレゼンテーションに適用されます。

  • height/width パラメータは、ブラウザウィンドウにおけるドキュメントの高さと幅を定義する。

表計算エディターとプレゼンテーションエディターは、それに応じて初期化されます。

表計算エディタ：

 window.docEditor = new DocsAPI.DocEditor("placeholder",
        {
            "document": {
                "fileType": "xlsx",
                "key": "W5FAFC9C22A8",
                "title": "Example Document Title.",
                "url": "https://example.com/url-to-example-document.xlsx"
            },
            "documentType": "cell",
            "height": "100%",
            "width": "100%"
        });

スライドエディタ：

   window.docEditor = new DocsAPI.DocEditor("placeholder",
        {
            "document": {
                "fileType": "pptx",
                "key": "W7FAFC9C21A8",
                "title": "Example Document Title.",
                "url": "https://example.com/url-to-example-document.pptx"
            },
            "documentType": "slide",
            "height": "100%",
            "width": "100%"
        });
    }
}  

今回の構成は、基本セクションとドキュメントセクションのみです。これは、エディタを表示するために必要な最低限のものです。しかしながら、editorConfigセクションも含めることができます。このセクションはエディターインターフェイスのパラメータを変更することができます：オープニングモード、インターフェイス言語、追加ボタンなど。異なるセクションと追加パラメータについて、APIドキュメントページで詳しく説明しています。

注意! editorConfigセクションはcallbackUrlパラメータを含んでおり、これはドキュメントストレージサービスへの絶対的なURLを指定します。このコールバックハンドラはソフトウェアインテグレータがサーバーに実装する必要があります。そうでなければ、ドキュメント保存にアクセスできなくなります。

エディタは1つのdivに表示されます。対応するボタンをクリックするたびに、要求されたエディタが初期化され、ロードされます。これを実現するために、コードを修正する必要があります。

var openEdit = function(type) {
    if (typeof docEditor != "undefined") {
        docEditor.destroyEditor();
    }
    if (type == "docx") {
        window.docEditor = new DocsAPI.DocEditor("placeholder",
        {
            "document": {
                "fileType": "docx",
                "key": "W8FAFC9C22A8",
                "title": "Example Document Title.",
                "url": "https://example.com/url-to-example-document.docx"
            },
            "documentType": "word",
            "height": "100%",
            "width": "100%"
        });
    }  else if (type == "xlsx") {
        window.docEditor = new DocsAPI.DocEditor("placeholder",
        {
            "document": {
                "fileType": "xlsx",
                "key": "W5FAFC9C22A8",
                "title": "Example Document Title.",
                "url": "https://example.com/url-to-example-document.xlsx"
            },
            "documentType": "cell",
            "height": "100%",
            "width": "100%"
        });
        
    } else if (type == "pptx") {
        window.docEditor = new DocsAPI.DocEditor("placeholder",
        {
            "document": {
                "fileType": "pptx",
                "key": "W7FAFC9C21A8",
                "title": "Example Document Title.",
                "url": "https://example.com/url-to-example-document.pptx"
            },
            "documentType": "slide",
            "height": "100%",
            "width": "100%"
        });
    }
}  
var docx = document.getElementById("docx");
var xlsx = document.getElementById("xlsx");
var pptx = document.getElementById("pptx");
docx.onclick = function() {
    openEdit("docx")
};
xlsx.onclick = function() {
    openEdit("xlsx")
};
pptx.onclick = function() {
    openEdit("pptx")
};

まず、destroyEditorメソッドを追加しました。このメソッドは、ドキュメント・エディタを別の構成で再初期化するために呼び出されます。別のエディタを選択するたびに、このメソッドが実行され、現在のエディタがdivに表示されないようにします。

次に、各エディタ設定を if 文でラップしています。これにより、関数のパラメーターに「docx」、「xlsx」、「pptx」を渡して、特定のエディターをそれぞれ初期化することができます。

その後、ボタン要素をターゲットにし、ドキュメント、スプレッドシート、プレゼンテーションエディタに対応するパラメータで、onclickイベントにフックしました。

それでは、SPA を開いてどのように動作するか見てみましょう!

https://www.onlyoffice.com/blog/wp-content/uploads/2022/08/2022-08-24_175950-1536x802.png

https://www.onlyoffice.com/blog/wp-content/uploads/2022/08/2022-08-24_180013-1536x802.png

https://www.onlyoffice.com/blog/wp-content/uploads/2022/08/2022-08-24_180031-1536x802.png

ONLYOFFICE Docsは、あなたのWebアプリケーションに簡単に統合でき、SPAの機能を拡張できるパワフルかつ柔軟なツールです。ONLYOFFICE Docsの詳細については、APIドキュメントの開発者向けセクションでご覧いただけます。

近日中に、React、Angular、Vueのラッパーをリリースする予定ですが、これらはあなたの開発にとって非常に便利で時間節約になるソリューションかもしれません。この機能を利用するためのアップデートにご期待ください。また、ご質問やアイデアの共有もお気軽にどうぞ。私たちは、いつでも議論と協力にオープンです。あなたの探求的な試みが成功することを祈っています。