2023 年春,我们推出了 ONLYOFFICE DocSpace,这是一个先进的联合办公平台,旨在加强与客户、合作伙伴和第三方的文档协作。凭借可定制的会议室和先进的安全功能,这一创新解决方案彻底改变了您的文档协作方式。在本文中,我们将以 GitHub Pages 为例,演示如何将 DocSpace 轻松集成到单页应用程序(SPA)中。

为什么要集成 DocSpace
无论您使用的是云端版本还是服务器版本,DocSpace 都能为您提供大量定制选项,使您能够增强网络应用程序的功能,并使其完全符合您的要求:
与协作编辑器和查看器无缝协作内容。
为各种用途设计和个性化房间。
将特定的 DocSpace 部分、房间或文件夹无缝集成到您的网络应用程序中。
受益于强大的安全功能,包括 AES-256 加密、JWT 授权、2FA 等。
通过无缝集成OpenAI提高您的工作效率。
ONLYOFFICE DocSpace重新定义了文档工作流程,将全面的协作功能与强大的存储解决方案相结合。它为希望增强其产品的协作和存储功能的开发人员提供了帮助,使其成为 CRM、PMS、消息应用程序等的理想选择。
DocSpace 可在云端操作,也可在服务器上本地部署,为您提供精确调整和定制的灵活性。
在接下来的文章中,我们将深入探讨与服务器版进行本地集成的可能性。不过,今天我们的重点是毫不费力地将云版本集成到单页应用程序(SPA)中。这一过程非常简单,无需在本地安装 ONLYOFFICE DocSpace。
设置DocSpace账户
创建DocSpace账户并选择您的计划。DocSpace解决方案提供免费的启动计划和企业订阅计划。
嵌入 DocSpace
DocSpace 功能多样,既可嵌入整个应用程序,也可嵌入特定的房间和文件夹。嵌入整个 DocSpace 实例是一个非常简单的过程,只需点击几下即可实现:
在 DocSpace 主页屏幕上,点击姓名旁边的三个点,进入 DocSpace 设置:

在右侧选项卡中,选择 "开发工具 "选项:

转到 JavaScript SDK,向下滚动到创建 DocSpace 嵌入示例部分:

在这里,您可以自定义显示选项,包括宽度、高度、界面元素、数据显示设置和高级显示设置。
切换到代码,插入并复制生成的代码片段:

将生成的代码段插入网站的 index.html 文件。
返回 DocSpace 开发工具页面,向上滚动到 "将 DocSpace 嵌入 iframe "部分。粘贴到你网站的链接,然后按 + 图标。链接将出现在输入框下方:

请访问您的网站:

嵌入特定房间
要嵌入特定房间,请按以下步骤操作:
返回 DocSpace 设置中的 "开发人员工具"。
导航至 JavaScript SDK 并向下滚动至创建 DocSpace 嵌入示例部分。在此,您可以配置 iframe 的宽度和高度,选择要显示的界面元素,并修改高级显示设置。要显示特定房间,请转到数据显示设置,然后从创建的房间列表中进行选择:

切换到 "插入代码 "选项卡,复制生成的代码片段:

将生成的代码段插入网站的 index.html 文件:

将 DocSpace 嵌入 GitHub 页面
登录 GitHub。
在你的 GitHub 账户中,创建一个新仓库,在用户名后面加上 .github.io。
转到 GitHub 仓库,新建一个 index.html 文件,粘贴 DocSpace Javascript SDK 中的代码片段,然后提交更改。
将仓库部署为 GitHub 页面。
返回 DocSpace 开发工具页面,向上滚动到 "将 DocSpace 嵌入 iframe "部分。插入指向网站所在 GitHub 域名的链接,然后点击 + 图标。确保链接格式如下:yourGitHubName.github.io。您将看到输入框下方显示的链接。
访问你的网站。
我们相信本文已经展示了ONLYOFFICE DocSpace如何将协作提升到一个新水平,并无缝集成到您的工作流程中。借助其功能,您可以轻松加强文档协作。
请继续关注我们即将发布的文章,我们将在文章中探讨与服务器版本更深层次的集成。我们相信,这些见解将进一步增强你的能力,让 DocSpace 最大限度地满足你的协同工作需求。祝您在探索过程中一切顺利!

渝公网安备50010702505508