【技术教程】如何将文档编辑器集成至基于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

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 语言示例

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如若转载,请注明出处:http://www.pswp.cn/web/95753.shtml
繁体地址,请注明出处:http://hk.pswp.cn/web/95753.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

[论文阅读] 人工智能 + 软件工程 | 别让AI写的代码带“漏洞”!无触发投毒攻击的防御困境与启示

别让AI写的代码带“漏洞”!无触发投毒攻击的防御困境与启示 论文信息 原标题:Evaluating Defenses Against Trigger-Free Data Poisoning Attacks on NL-to-Code Models(评估NL-to-Code模型应对无触发数据投毒攻击的防御方法)主要…

【Windows】通过 runas 命令实现多用户权限测试的完整流程

▒ 目录 ▒🛫 导读需求1️⃣ 前期准备:创建管理员/普通测试用户1.1 创建普通用户Test(无管理员权限)1.2 创建管理员用户Admin(含管理员权限)2️⃣ 核心操作:通过runas命令切换用户命令行环境2.1…

新后端漏洞(上)- H2 Database Console 未授权访问

漏洞介绍: H2 database是一款Java内存数据库,多用于单元测试。 H2 database自带一个Web管理页面,在Spirng开发中,如果我们设置如下选项,即可允许外部用户访问Web管理页面,且没有鉴权: spring.h2…

2025-09-04 HTML3——区块布局与表单

文章目录1 块元素与行内元素1.1 块元素 (Block-level Element)1.2 行内元素 (Inline Element)2 HTML 布局2.1 使用 <div> 元素2.2 使用 <table> 元素3 表单 (<form>)3.1 输入域&#xff08;<input>&#xff09;3.1.1 文本域&#xff08;Text Fields&am…

云数据库服务(参考自腾讯云计算工程师认证课程)更新中......

数据库基础介绍面临的挑战&#xff1a;数据库系统架构&#xff1a; 数据库DB、数据库管理系统DBMS&#xff08;负责数据库的搭建、使用和维护的系统软件&#xff0c;通过组织、索引、查询、修改数据库文件、实现数据定义、组织、存储、管理以及数据库操作、运行和维护等主要功能…

源滚滚AI编程SillyTavern酒馆配置Claude Code API教程

什么是酒馆 SillyTavern&#xff08;简称 ST&#xff09;是一款本地安装的用户界面&#xff0c;让你能够与文本生成大模型&#xff08;LLM&#xff09;、图像生成引擎以及语音合成&#xff08;TTS&#xff09;模型进行交互。我们的目标是尽可能赋予用户对 LLM 提示词的最大掌控…

软件设计师——软件工程学习笔记

软件工程 一、软件工程基础知识 1. 软件的生存周期&#xff08;1&#xff09;可行性分析与项目开发计划。这个阶段主要确定软件的开发目标及其可行性。参与该阶段的人员有用户、项目负责人、系统分析师。产生的文档有 可行性分析报告、项目开发计划。 &#xff08;2&#xff09…

阿里云ecs 2h2g 实际可用内存不足的情况

Kdump是Linux系统的一种内核崩溃转储机制&#xff0c;它允许在系统发生内核崩溃&#xff08;例如内核panic&#xff09;时&#xff0c;捕获内存的转储信息&#xff0c;从而帮助事后分析故障原因。该过程需要一块预留内存&#xff08;称为crashkernel内存&#xff09;&#xff0…

MySQL抛出的Public Key Retrieval is not allowed

有时候在连接实例的时候会遇到这样的报错Public Key Retrieval is not allowed问题分析这是因为账号使用了sha256_password或者caching_sha2_password 密码插件而sha256_password或者caching_sha2_password 插件为了加快认证过程&#xff0c;在服务端维护了一个密码哈希缓存。当…

ICP可能有用的

可以训练GICP WGICP: Differentiable Weighted GICP-Based Lidar Odometry | GAMMA CT ICP (99 封私信 / 80 条消息) KITTI里程计排行榜上第五&#xff01;CT-ICP&#xff1a;实时弹性激光雷达里程计与回环检测 - 知乎 Faster GICP github.com

nextcyber——Shells和Payloads

Shells和Payloads Shell的基础知识 正向Shells Tom可以在一个Linux目标上发出nc -lvnp 443的命令。他需要从他的攻击机连接到哪个端口&#xff0c;才能成功建立一个shell会话&#xff1f; 443SSH到目标&#xff0c;创建一个bind shell&#xff0c;然后用netcat连接到目标&a…

笔记:现代操作系统:原理与实现(2)

第三章 操作系统结构 操作系统的机制与策略 操作系统乃至计算机系统中控制复杂度的—个重要设计原则是:将策略与机制相分离&#xff0c;其中策略&#xff08;policy&#xff09;表示要‘‘做什么”&#xff0c;机制&#xff08;mechanjsm&#xff09;表示该“如何做”。 操作系…

c++ 压缩与解压缩

1、使用zip开源库&#xff0c;引入比较简单&#xff0c;只需要包含四个头文件&#xff0c;不需要编译成库文件&#xff1a;zip.h、zip.cpp、unzip.h、unzip.cpp。2、压缩使用到的主要函数&#xff1a;CreateZip 创建zip文件ZipAdd 添加文件ZipAddFolder 添加文件夹CloseZip 关闭…

水下无线光通信(UWOC)TDD系统:光收发端编解码与信号处理分析与方案(数字版)

在光收发模块中添加编解码与信号处理模块,核心目标是提升水下信道抗干扰能力(对抗后向散射、环境光、信号衰减)、降低误码率,同时兼容原有TDD时隙控制逻辑。以下从“编码方案选型”“光发送端信号处理”“光接收端信号处理”“与原有系统集成”四部分展开,形成完整技术闭环…

Seat 事务@GlobalTransactional传播行为

一&#xff0c;分布式事务传播行为调用链描述一个普通事务注解的方法&#xff0c;调用一个分布式事务注解方法分布式事务注解方法&#xff1a;包含一个本地更新&#xff0c;和两个外部服务更新操作&#xff0c;涉及三个服务问题1&#xff0c;普通事务注解方法&#xff0c;在全局…

美团龙猫利用expat库实现的保存xml指定范围数据到csv的C程序

用自己代码逐个字符解析的速度较慢&#xff0c;尝试了libxml2也比较慢&#xff0c;它需要一次性读入内存&#xff0c;而expat库支持流式读取。就让龙猫写了一个程序&#xff0c;毕竟是久经考验的库&#xff0c;程序很快就调试通过了。要不是我一开始没信心&#xff0c;让他先输…

Transformer核心—自注意力机制

Transformer基础—自注意力机制 当我们处理文本、语音这类序列数据时&#xff0c;总会遇到一个老问题&#xff1a;模型到底该怎么理解“前后文”呢&#xff1f; RNN 和 LSTM 曾经是热门的答案&#xff0c;它们沿着时间顺序一点点地读数据&#xff0c;但读得太慢&#xff0c;还容…

分片上传-

分片上传原理&#xff1a;客户端将选择的文件进行切分&#xff0c;每一个分片都单独发送请求到服务端&#xff1b;断点续传 & 秒传原理&#xff1a;客户端 发送请求询问服务端某文件的上传状态 &#xff0c;服务端响应该文件已上传分片&#xff0c;客户端再将未上传分片上传…

零知开源——基于STM32F103RBT6的智能风扇控制系统设计与实现

✔零知IDE 是一个真正属于国人自己的开源软件平台&#xff0c;在开发效率上超越了Arduino平台并且更加容易上手&#xff0c;大大降低了开发难度。零知开源在软件方面提供了完整的学习教程和丰富示例代码&#xff0c;让不懂程序的工程师也能非常轻而易举的搭建电路来创作产品&am…

ReACT Agent概述

目录 1. 核心思想&#xff1a;解决传统方法的局限性 2. ReACT 的工作原理&#xff1a;一个循环过程 3. 技术实现的关键要素 4. ReACTAgent 在任务中的具体工作流程 5. 优势与重要性 6. 挑战与局限性 总结 ReACT 是一个非常重要的框架&#xff0c;它代表了构建能够推理&a…