如何开发一个功能插件，并上架至ONLYOFFICE

如何开发一个功能插件，并上架至ONLYOFFICE

引用

CSDN

1.

https://blog.csdn.net/m0_68274698/article/details/137498494

ONLYOFFICE作为一个开源的办公软件套件，支持文档、电子表格和演示文稿的创建与编辑，其强大的插件开发能力使得用户可以根据需求定制专属功能。本文将详细介绍如何为ONLYOFFICE开发一个功能插件，并将其上架至官方插件市场。

ONLYOFFICE 简介

ONLYOFFICE 是一个开源软件项目，由总部位于拉脱维亚的 IT 公司 Ascensio System SIA 开发。其主要产品是 ONLYOFFICE 文档：一个功能强大的文档编辑套件，支持编辑处理文本文档、电子表格、演示文稿、可填写的表单、PDF。带有 AI 插件，且非常方便多人在线共同编辑协作。

此外，ONLYOFFICE 还提供了一个在线文档协作平台——ONLYOFFICE 协作空间，自带一套编辑器，支持免费在线使用。

开发插件基本步骤

开发一个 ONLYOFFICE 插件需要如下几个基本步骤：

1. 准备
2. 编码开发
3. 调试插件的风格样式
4. 本地化
5. 准备发布
6. 测试
7. 公开发布

第一步：准备

1. 开发一个插件并且要发布在 ONLYOFFICE 官方的插件市场上，需要有一个 GitHub 账号，注册一个新账号或登录你自己的账号。
2. 将 ONLYOFFICE 官方插件市场源码文件仓库新开一份分叉到你的账号下：https://github.com/ONLYOFFICE/onlyoffice.github.io

将会得到你自己的一份源码文件仓库，地址类似于这样：https://github.com/YOUR-USERNAME/ONLYOFFICE/onlyoffice.github.io

3. 创建你自己的 GitHub Pages 网站，方便之后在线测试你的插件，可以参考官方 GitHub Pages 快速入门。
4. 把代码 clone 到自己的开发用的计算机上

5. 在路径 onlyoffice.github.io/sdkjs-plugins/content 下添加一个文件夹开发自己的插件，比如起名为 HelloWorld，这里并没有真的打算开发一个有什么特定的我需要的功能而 ONLYOFFICE 本身没有提供的功能，因为 ONLYOFFICE 基本上提供了完备的所有办公功能，所以决定只是照搬官网的 Hello World 这个最简单的开发测试用例来举例子。

第二步：编码开发

开发你的插件，遵循这里介绍的架构开发，该文件夹下必须包含如下三个文件：config.json、index.html、pluginCode.js

需要使用插件 API 的方法 method 和事件 event 来编写实现插件功能。

在学习入门阶段，为了最简化问题，开发一个 Hello World 功能来测试，并且不准备最终提交 ONLYOFFICE 官方插件市场。最终开发实现的，这个功能很简单，如下图所示

点击这个测试用插件的按钮，自动插入 Hello World。为了更简化开发，不用手写一行代码，直接打开官方提供的 Hello World 代码库。

直接把下载的 hello world 示例文件夹的内容拷贝进自己的 hello world 文件夹内即可。

第三步：调试插件的风格样式

添加 ONLYOFFICE 的 Style 风格 Sheet 到 index.html 文件，调试你的插件的风格样式

<link rel="stylesheet" href="https://onlyoffice.github.io/sdkjs-plugins/v1/plugins.css">

第四步：本地化

创建 translations 文件夹，为每一个语言创建一个 json 文件，具体本地化翻译的细节可以参考这个帮助。

在 config.json 文件中的翻译如下：这是一个按钮，按钮上的 ok 这个字符串如果需要翻译的话，新建一个对象为 textLocale，其内仅添加一种中文既 zh，内容为确认

第五步：准备发布

1. 创建一个关于窗口，包括一段简短的说明、版本号、开发者或开发商信息、官网链接等。在 config.json 文件中创建关于窗口的详情在这里
2. 准备图标，置于 resources 文件夹内，在 config.json 文件中创建配置图标的详情在这里
   注意总共需要准备 8 个图标文件，四种不同的大小比例：125%、150%、175%、200% 以及正常和黑暗两种模式。
3. 不要忘了 readme 说明文件，说明功能特征、安装卸载、使用方法、以及其它任何你想告知使用者的信息，推荐为 markdown 格式。

第六步：测试

准备好上述所有文件后可以推送到你的远程代码仓库上，就可以用你的在线版和本地版 ONLYOFFICE 测试功能了。

1. 在桌面版 ONLYOFFICE 编辑器中测试
   在线测试之前先要完全在本地测试一遍，在配置文件 config.json 中找到插件的唯一 GUID 识别代号：

在 Windows 系统下 ONLYOFFICE 安装路径下面的 plugins 插件集中存放的路径 d:\Program Files\ONLYOFFICE\DesktopEditors\editors\sdkjs-plugins 下创建一个文件夹，以该 GUID 命名

然后将开发的该插件的文件夹内的所有文件拷贝到新建的该路径下

就可以打开本地版 ONLYOFFICE 编辑器查看效果了

可以用 debug 模式启动本地 ONLYOFFICE 编辑器，启动时添加参数 --ascdesktop-support-debug-info，根据你电脑所使用的操作系统的版本，参考这个帮助页来开启 debug 模式运行

用 debug 模式可以调试自己开发出来的 bug，毕竟不写 bug 的程序员不是好程序员，在 debug 模式打开 ONLYOFFICE 桌面编辑器后，可以在任何操作过程中按下键盘快捷键 F1 键来启动 debug 工具如下图所示：

看到这个画面，web 网页开发工程师就心里踏实了，这不就是最熟悉的 debug 工具功能吗，这里就可以查看调试自己所开发的任意代码了。

2. 在线版 ONLYOFFICE 编辑器中测试
   本地测试通过后再推送到网络上，在网页浏览器里面测试在线 ONLYOFFICE 版本使用新开发的插件的功能。

如果有自己团队架设了 ONLYOFFICE 文档服务器，那就安装到自己的文档服务器上测试使用，ONLYOFFICE 文档服务器端安装测试新开发的插件的操作说明在这里。但是我更建议在部署到文档服务器之前，先安装到网页浏览器里面测试插件功能，这样有几个好处：你没有自己的文档服务器可以用 ONLYOFFICE 的官方免费个人在线版来测试，官方在线 ONLYOFFICE 或者团队的 ONLYOFFICE 文档服务器不是你能去操作服务器端安装插件的，在浏览器里面不管连接哪一家的文档服务器都能使用自己开发的新插件。

首先别忘了把自己开发的新插件推送到自己 Github 账户下分叉出来的 onlyoffice.github.io 这个代码库上，在网页上查看确认自己写的 HelloWorld 确实存在了

然后打开本地文件 onlyoffice.github.io/store/plugin-dev/extension/inject.js，向参数 URL_TO_PLUGIN 添加你开发的插件在 GitHub 上的网络路径

var URL_TO_PLUGIN = "https://YOUR-USERNAME.github.io/onlyoffice.github.io/sdkjs-plugins/content/helloworld/"

这个地址需要根据自己的 Page 修改，然而按照手册的这个地址自己反复测试也不通过，最后自己采用了比较简单粗暴的方法，直接把这个 helloworld 文件夹整体拷贝到自己的 Pages 的根路径下反倒是能够最终测试成功，

修改 inject.js 文件内容：

修改好的本地文件夹 onlyoffice.github.io/store/plugin-dev/extension 就是浏览器的一个新插件了，安装到浏览器上，比如一个新插件开发完成了，再开发另一个新插件，则不要忘了再修改 onlyoffice.github.io/store/plugin-dev/extension/inject.js 这个文件指向新插件的 GitHub 的网络路径，不要忘了在浏览器里面卸载重新安装这个插件

比如在 Chrome 浏览器中手动安装插件，选择本地安装从 onlyoffice.github.io/store/plugin-dev/extension 文件夹安装，浏览器安装好这个 ONLYOFFICE 插件开发专用插件之后，就可以打开在线版 ONLYOFFICE 文档，比如 ONLYOFFICE 免费版，官方免费个人版只能安装官方插件市场的插件，但是通过这个浏览器插件，就可以测试自己开发的插件了，就可以在插件栏中发现已经自动加载了自己新开发的插件了：

在插件管理器中找到该插件

注意要在这里的插件管理器、我的已安装插件界面里面切换正常和黑夜模式，来观察图标设计是否清晰辨认，如有必要返回上述有关步骤修改设计

第七步：公开发布

如果想把你开发的插件贡献到 ONLYOFFICE 的官方插件市场上，从你的 fork 分支向官方的 https://github.com/ONLYOFFICE/onlyoffice.github.io 发起一个 pull request，功能正常的话，你的 pull request 将被批准并上线官方插件市场。

最后，你可以讨论插件的开发、请求新功能、或者报告 bug 等等，只需要在 marketplace repository 插件市场库中提交一个 issue 提案。

参考文献 & 相关链接

• Getting started with plugins
• Hello World
• ONLYOFFICE 官网
• 注册云端 ONLYOFFICE
• 下载 ONLYOFFICE 桌面编辑器