Skip to main content

逐步建立

想要一次把所有事物建立成功是不太可能的，我們將透過一步一步小型的、容易測試的步驟，來完成建置。

{"BaseFileName": "test.txt", "Size": 11}
  1. 在專用伺服器或虛擬機器中安裝 OxOffice Online，並確定瀏覽器可以正確連接到 OxOffice Online。 
    https://<WOPI 客戶端 URL(OxOffice Online)>:<port>/hosting/discovery

  2. 在您的應用程式增加 WOPI REST API 的接口。目前只須在 GET 請求時，回應「Hello World」即可，您可以透過瀏覽器進行測試。必要的話，需要用伺服器 rewrite 功能，將 REST API 導向您設計的接口。此時，測試該接口，應該會得到 Hello World 的回應：

    https://<WOPI 主機 URL>/<...>/wopi/files/<file id>/contents

  3. 實作 CheckFileInfo 接口。確保以下位址：

    https://<WOPI 主機 URL>/<...>/wopi/files/<file id>

    回應 JSON 內容，類似：

    {"BaseFileName": "test.txt", "Size": 11}


  4. 您應該可以從步驟 1，取得 OxOffice Online 預先建置的 discovery.xml，其中的 urlsrc 即為 OxOffice Online 編輯擋案用的位址，您可以把 WOPISrc=https://<WOPI 主機 URL>/<...>/wopi/files/<file id> 加在其後，結果如下：

    https://<WOPI 客戶端 URL>:<port>/loleaflet/<hash>/loleaflet.html?WOPISrc=https://<WOPI 主機 URL>/<...>/wopi/files/<file id>

    接著建立一個名為 test.html 的測試頁，其中包含以下內容：

    1<html><body>
2        <form action="前面所建立的位址" enctype="multipart/form-data" method="post">
3        <input name="access_token" value="test" type="hidden"/>
4        <input type="submit" value="Load OxOffice Online"/>
5        </form>
6</body></html>

    當您從瀏覽器載入 test.html 並點擊 Load OxOffice Online 按鈕，將會開啟一份文字文件，內容是步驟 2 WOPI REST API 所提供的「Hello World」。如果您的 WOPI 主機和 OxOffice Online 位於不同的電腦上，請修改位於 OxOffice Online 主機的 /etc/oxool/oxoolwsd.xml，在<storage> → <wopi>下，新增一筆 <host> WOPI 主機的位址及埠號。

  5. 到了這裡您已經掌握了基本要領了，然後我們開始擴充 JavaScript 的部份：建立一個包含 OxOffice Online 的 iframe，並且提供一個真正有存取權的 token。對 OxOffice Online 而言，這個存取用的 token 可以是隨機的文字、或是只有數字、字元以及底線所組成。

  6. 現在，請更新您的 REST API 接口，讓它能提供真實的檔案資料，以代替「Hello World」 以及步驟 3 所寫死的 JSON 回應。這裡，您需要送出真實檔案，並參考 CheckFileInfo 表列屬性，送出相應的 JSON 回應。

  7. Implement the PutFile end point, so that the results of editing can appear in your file storage too. To do this, implement the POST request to

    https://<WOPI 主機 URL>/<...>/wopi/files/<file id>/contents

  8. Either implement the PutRelativeFile endpoint, so that the option to Save As appears in the UI, or change CheckFileInfo to return UserCanNotWriteRelative with value true if you don’t want to do that yet.


Back to top