【技術教程】如何將文檔編輯器集成至基于Node.js的網頁應用程序中

當今數字化時代，Web應用對在線文檔編輯的需求日益增長。無論是構建在線辦公系統、內容管理平臺還是協作工具，讓用戶能夠直接在瀏覽器中編輯和處理文檔已成為基本需求。

想知道如何為你的 Node.js 應用添加強大的在線文檔編輯功能嗎？本文手把手教你集成 ONLYOFFICE 文檔編輯器，輕松實現 Office 的在線協作體驗。

關于 ONLYOFFICE 文檔

ONLYOFFICE 文檔是多合一的文檔編輯套件，支持文字、表格、幻燈片、 PDF 和表單的編輯與協作，高度兼容微軟Office格式。易于使用和集成，可以在您的網站、平臺或系統中高效處理多種類型的文檔，實現文件格式間的便捷轉換和無縫協作。

?如果您想要將為自己的系統和平臺集成編輯功能，您可以了解我們的開發者版本：

ONLYOFFICE文檔開發者版：集成至Web應用程序，實現文檔編輯功能

為什么需要集成文檔編輯器

通過集成 ONLYOFFICE 文檔，你的用戶可以在您的應用中直接編輯和協作處理文檔，而無需切換到其他工具，為您帶來以下顯著優勢：

1. ?易于集成，提升用戶體驗?

ONLYOFFICE 文檔可以無縫地適應您的網絡應用，支持多種流行的編程語言和開發框架，包括JavaScript、Python、Java、C#等。我們為前端框架提供現成的組件樣本 (Angular, React, Vue 等)。

2. ?多種部署方式?

您可以將 ONLYOFFICE 文檔開發者版集成到您的 SaaS 或本地解決方案中，支持私有化部署和內網環境使用，更好得保護數據安全。此外，您可以在多種安裝選項中選擇部署編輯器，例如Docker、Snap、阿里云鏡像等。

3. ?品牌自定義和擴展性?

我們提供白標產品，您可以更改 logo，自定義編輯界面，選擇顯示或隱藏額外的按鈕，為您的用戶提供更好的品牌體驗。ONLYOFFICE 文檔可以為任何數量的用戶進行擴展，即使您有成千上萬的用戶，也能滿足需求。而且無論是開發文件和內容管理系統、CRM 和電子學習平臺、郵箱和項目管理軟件等，ONLYOFFICE 都可以很好的適應不各種業務場景和工作流程。

了解更多ONLYOFFICE開發者版優勢

集成步驟：Node.js 實戰示例

注意：本示例僅用于測試目的以及演示編輯器的功能。在沒有進行適當的代碼修改之前，請勿在您自己的服務器上使用此集成示例。如果您啟用了測試示例，在投入生產環境之前請將其禁用。

重要安全信息

在使用測試示例時，請牢記以下安全方面的內容：

由于無需授權，存儲不受未經授權訪問的保護。
由于參數是由代碼根據預先安排的腳本生成的，因此不會對鏈接中的參數替換進行檢查。
編輯后保存文件的請求中不會進行數據檢查，因為每個測試示例僅適用于來自 ONLYOFFICE 文檔的請求。
不禁止從其他網站使用測試示例，因為它們旨在與來自其他域的 ONLYOFFICE 文檔進行交互。

一、適用于 Windows 系統

步驟1. 安裝 ONLYOFFICE 文檔

在開始集成前，需要先為自己的系統安裝合適的? ONLYOFFICE 文檔?（打包為文檔服務器）：

獲取ONLYOFFICE文檔

如需了解如何在Windows系統上安裝ONLYOFFICE文檔請查看詳細指南。

步驟2.下載用于集成編輯器的 Node.js 代碼

從我們的官方網站下載Node.js示例。

要將編輯器連接到您的網站，請在config/default.json文件中指定編輯器的安裝路徑和存儲文件夾的路徑：

{"storageFolder": "./files","storagePath": "/files","siteUrl": "https://documentserver/"
}

其中，?documentserver?是安裝了ONLYOFFICE文檔的服務器名稱，?storageFolder?和?storagePath?是將創建和存儲文件的路徑。您可以設置一個絕對路徑，例如?D:\\folder。請注意，在 Windows 操作系統中，必須使用雙反斜杠作為分隔符。

如果您想嘗試配置編輯器，請修改*\views\editor.ejs*文件中的參數。

步驟3.安裝 Node.js 環境

安裝用于運行?Node.js?項目的node.js環境。請訪問官方網站，根據您的Windows操作系統（32位或64位）選擇正確的版本進行安裝。

步驟4. 配置 JWT

打開?config/default.json?文件并啟用 JWT：

{"server": {"token": {"enable": true}}
}

同樣也要與 ONLYOFFICE 文檔指定相同密鑰：

{"server": {"token": {"secret": "secret"}}
}

步驟5.運行 Node.js 代碼

我們將在 Node.js 運行時環境中運行代碼，并使用命令行界面 (cmd) 與之交互。

1. 啟動命令提示符，并切換到包含 Node.js 項目代碼的文件夾，例如：

cd /d "C:\Node.js Example"

2.?Node.js 附帶了一個包管理器，即?node 包管理器 (npm) ，它會隨 Node.js 一起自動安裝。要運行 Node.js 代碼，請使用以下?npm?命令安裝項目模塊：

npm install

項目文件夾中將會創建一個新的?node_modules?文件夾。

3. 使用命令提示符運行項目：

node bin/www

4.?在您的瀏覽器中使用以下地址查看結果：

http://localhost:3000

步驟6.檢查可訪問性

如果示例和 ONLYOFFICE 文檔安裝在不同的計算機上，請確保示例服務器能夠訪問您在配置文件中指定的（替換了?documentserver?的）地址的 ONLYOFFICE 文檔。同時確保 ONLYOFFICE 文檔反過來也能夠訪問示例應用服務器的（替換了?example.com?的）地址。

二、適用于 Linux 系統

步驟1. 安裝 ONLYOFFICE 文檔

下載并安裝ONLYOFFICE文檔（打包為文檔服務器）：

獲取ONLYOFFICE文檔

如需了解如何在Linux系統上安裝ONLYOFFICE文檔，請查看詳細指南。

步驟2. 安裝先決條件并運行帶有編輯器的網站

1. 安裝?Node.js:

curl -sL https://deb.nodesource.com/setup_14.x | sudo -E bash -

sudo apt-get install -y nodejs

2.?下載包含 Node.js 示例的壓縮包并解壓：

wget https://github.com/ONLYOFFICE/document-server-integration/releases/latest/download/Node.js.Example.zip

unzip Node.js.Example.zip

cd Node.js\ Example/

4.?安裝依賴項：

npm install

5.?編輯?config/default.json?配置文件。指定安裝了 ONLYOFFICE 文檔的本地服務器名稱。

nano config/default.json

編輯以下內容：

{"storageFolder": "./files","storagePath": "/files","siteUrl": "https://documentserver/"
}

其中，?documentserver?是安裝了 ONLYOFFICE 文檔的服務器名稱，?storageFolder?和?storagePath?是將創建和存儲文件的路徑。請注意，您必須對該文件夾具有讀寫權限。如果沒有，請使用以下命令：

sudo chmod -R ugo+rw /{path}

啟用 JWT：

{
"server": {"token": {"enable": true}
}
}

同樣也要與 ONLYOFFICE 文檔指定相同密鑰：

{
"server": {"token": {"secret": "secret"}
}
}

6. 使用 Node.js 運行項目：

node bin/www

7. 在您的瀏覽器中使用以下地址查看結果：

http://localhost:3000

步驟3.檢查可訪問性

選擇合適的文檔編輯器并成功集成到 Node.js 網絡應用中，可以顯著增強應用的功能性和用戶體驗。無論是內容管理系統、在線教育平臺還是企業內部網，合適的文檔編輯器都能成為應用的核心價值點。

希望本文能為您在文檔編輯器集成與開發的應用中提供全面的指導和參考。如果在集成過程中遇到問題，歡迎在評論區留言討論。