【技术教程】如何将文档编辑器集成至基于Node.js的网页应用程序中

发布于:2025-09-03 ⋅ 阅读:(15) ⋅ 点赞:(0)

当今数字化时代,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

3. 将当前目录切换到项目目录:

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.检查可访问性

如果示例和 ONLYOFFICE 文档安装在不同的计算机上,请确保示例服务器能够访问您在配置文件中指定的(替换了 documentserver 的)地址的 ONLYOFFICE 文档。同时确保 ONLYOFFICE 文档反过来也能够访问示例应用服务器的(替换了 example.com 的)地址。

选择合适的文档编辑器并成功集成到 Node.js 网络应用中,可以显著增强应用的功能性和用户体验。无论是内容管理系统、在线教育平台还是企业内部网,合适的文档编辑器都能成为应用的核心价值点。

希望本文能为您在文档编辑器集成与开发的应用中提供全面的指导和参考。如果在集成过程中遇到问题,欢迎在评论区留言讨论。

相关链接

更多文档 API 语言示例


网站公告

今日签到

点亮在社区的每一天
去签到