如何为 ONLYOFFICE 文档创建您自己的插件

yanding 2023-07-18 227

摘要:在本文中,您将学习如何为 ONLYOFFICE Docs 创建自己的插件以及如何将其发布到自 7.2 版本以来可用的官方插件价格。


解析和转换PDF文件等等。


不过,有一种方法可以让ONLYOFFICE变得更强大。这里指的是第三方插件,即增强套件高级功能的附加软件。例如,插件可以链接第三方服务或添加新的用户界面。


如何为 ONLYOFFICE 文档创建插件

在开始为 ONLYOFFICE Docs 创建自己的插件之前,您需要确保您拥有 GitHub 文档。


创建插件的过程可以分为七个步骤,您应该仔细遵循这些步骤:



第一个活动。

代码的编码。

改变插件风格。

位置状态(可选)。

准备。

测试。

发布到插件市场。

让我们更深入地了解插件开发。


首先,您需要登录 GitHub 帐户,如果没有,则创建一个帐户。之后,您需要创建位于以下 URL 地址的 ONLYOFFICE 插件零售商店分支:


https://github.com/ONLYOffice/onlyoffice.github.io。

因此,您将拥有另一个存储库,其 URL 地址如下所示:


https://github.com/YOUR-USERNAME/ONLYOFFICE/onlyoffice.github.io

如果成功分叉插件市场存储库,您需要从此存储库创建一个 GitHub Pages 站点以用于测试目的。如果您不知道如何操作,请参阅官方 GitHub 指南。


现在您已经有了自己的 GitHub Pages 站点,是时候在您的计算机上克隆 fork 了。


最后,您需要为未来的插件创建一个文件夹:


onlyoffice.github.io/sdkjs-plugins/content/。

就是这样。您刚刚完成了所需的所有初始任务,可以继续下一步。


您不需要非常擅长编码,但您绝对需要一些基本的编码知识来为 ONLYOFFICE Docs 创建自己的插件。


简而言之,ONLYOFFICE插件是一个包含许多文件的文件夹。您需要创建三个文件才能使插件正常工作:



config.json – 这是插件配置文件,包含有关所有重要数据的信息。在此文件中,有一些在 ONLYOFFICE 编辑器中注册插件所需的参数。请参阅官方 API 文档中的此页面以阅读每个参数的完整说明。

插件代码(.js 文件)——这是插件文件本身,其中包含插件的 JavaScript 代码。该文件描述了插件执行的功能以及它们的执行方式。阅读此 API 指南以了解其工作原理。

index.html – 这是链接到 config.json 和 plugin.js 文件的插件条目。查看此示例以了解它应该是什么样子。

除了这些必需文件之外,插件文件夹还可能包含其他文件。例如,图标、插件样式、自述文件、第三方服务等。您将在下面找到有关这些文件的更多信息。


要为您的插件编写良好的工作代码,您需要知道需要哪些事件。


为您的插件编写代码是不够的。您还应该自定义其样式,使其看起来像 ONLYOFFICE 编辑器的一个组成部分。为此,只需将 ONLYOFFICE 样式表添加到上述 index.html 文件中即可:


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

您可以添加按钮、输入控件、信号控件、加载程序等。


例如,要向插件添加组合框,您可以使用 select2 函数:


<select id="select_example" class="" ></select>

$('#select_example').select2({     

data : [{id:0, text:'项目 1'}, {id:1, text:'项目 2'}, {id:2, text:'项目 3'}],     

搜索的最小结果:无穷大,     

宽度:'120px'

});

嵌入的组合框将如下所示:



您可以在此处找到有关 ONLYOFFICE 风格单品的更多信息。


如果您要创建仅适用于英语使用者的插件,则可以跳过此步骤。但是,如果您希望您的插件支持其他语言,您可以在插件文件夹中创建翻译文件夹,并上传您想要使用的所有语言的 .json 文件。


请阅读官方 API 文档,了解如何在此处正确集中您的插件。



要在 ONLYOFFICE 市场上提供插件之前清理插件的外观,您需要添加一个“关于”窗口,其中包含您的插件、版本、公司名称等的简短描述。


例如,这是照片编辑器插件中的“关于”窗口:



要为您的插件创建这样的窗口,请按照以下说明操作。


此外,您需要为插件创建图像并将其上传到资源文件夹。一般来说,您需要 8 分才能使您的插件在 ONLYOFFICE 插件市场上表现良好:浅色和深色界面主题需要 4 分(125%、150%、175% 和 200% 成功)。


此外,您可以创建一个自述文件并将其上传到主插件文件夹。该文件可以包含您希望其他用户了解的任何信息 - 插件主要功能的描述、安装说明、已知问题和错误等。


现在您的插件已准备就绪,您可以在将其发布到市场之前对其进行彻底测试。


现在是时候将您根据上面的说明创建的所有文件放入插件文件夹中了。然后将插件文件夹推送到远程存储库并在 ONLYOFFICE 桌面编辑器中测试该插件。为此,您可以在调试模式下运行该软件。


在 Linux 上,您可以使用 CTRL+ALT+T 打开终端。之后,输入 ONLYOFFICE Desktop Editors 的路径,添加一个空格,然后输入--ascdesktop-support-debug-info:


“/opt/onlyoffice/desktopeditors/DesktopEditors”--ascdesktop-support-debug-info

测试您的插件及其组件。


如果一切正常,您还可以在 ONLYOFFICE 套件的网页版 ONLYOFFICE Docs 中测试您的插件。换句话说,您的插件可以作为新插件添加。


要创建有效的插件,您需要打开 onlyoffice.github.io/store/plugin-dev/extension/inject.js 文件,并在 URL_TO_PLUGIN 变量中指定 GitHub Pages 站点上插件的路径:


var URL_TO_PLUGIN = "https://您的用户名.github.io/onlyoffice.github.io/sdkjs-plugins/content/your-plugin/"

onlyoffice.github.io/store/plugin-dev/extension 文件夹是您需要的扩展。只需将其安装在您的网络浏览器上即可,如何将插件添加到网络浏览器。



如果您的插件按预期工作,您可以继续执行最后一步。


我们要祝贺你!您已经完成了插件创建过程,现在您可以将您的插件提供给其他用户。为此,您可以从您的分支向以下 ONLYOFFICE 存储库发出拉取请求:


https://github.com/ONLYOffice/onlyoffice.github.io

如果您的插件表现良好,ONLYOFFICE工作人员将批准您的拉取请求,您的插件将出现在ONLYOFFICE插件市场中。在这种情况下,第三方只需点击几下即可手动安装。


我们希望这篇文章对您有所帮助。不要忘记在下面的评论中分享您的想法。

言鼎科技

The End