构建插件的基本步骤

编码
调整插件样式
本地化
准备发布插件
测试
发布

插件的文件结构

config.json 插件配置文件，其中包含有关在编辑器中注册插件所需的主要插件数据的信息。
index.html 插件入口点，连接config.json和plugin.js（使用插件所需的基本文件）文件。
相关js文件上面所写的 plugin.js

config.json

官网的例子

{
    "baseUrl": "",
    "guid": "asc.{FFE1F462-1EA2-4391-990D-4CC84940B754}",
    "help": "",
    "name": "chess(fen)",
    "variations": [
        {
            "buttons": [
                { "text": "OK", "primary": true  },
                { "text": "Cancel", "primary": false }
            ],
            "description": "chess",
            "EditorsSupport": ["word", "cell", "slide"],
            "icons": ["chess/icon.png", "chess/icon@2x.png", "chess/icon2.png", "chess/icon2@2x.png"],
            "initData": "",
            "initDataType": "ole",
            "initOnSelectionChanged": true,
            "isDisplayedInViewer": true,
            "isInsideMode": false,
            "isModal": true,
            "isSystem": false,
            "isUpdateOleOnResize": true,
            "isViewer": true,
            "isVisual": true,
            "url": "chess/index.html"
        }
    ]
};

属性名	描述	类型	默认值
baseUrl	当前插件的基础路径。所有其他路径都是相对于该路径计算的。	string	“”
guid	插件标识符。它必须是 `asc.{UUID}` 类型。	string	“”
help	插件描述页面的路径。如果指定了参数，则在插件窗口中显示帮助按钮，当用户单击按钮时，他将链接到插件描述页面。	string	“”
name	插件名称，将在插件工具栏上显示。	string	“”
variations	插件变体或“子插件”-请参阅下面的“插件变体”部分。	array	[]
variations.buttons	插件界面中使用的可换皮肤的插件按钮列表（仅用于具有自己窗口的可视插件，即 `isVisual == true && isInsideMode == false`）。按钮可以是主按钮，也可以不是主按钮，主标志仅影响按钮的外观。	array	[]
variations.description	描述说明。	string	“”
variations.EditorsSupport	插件可用的编辑器（word-文本文档编辑器，cell-电子表格编辑器，slide-演示文稿编辑器）。	array	[]
variations.icons	编辑器中使用的插件图标图像文件（图标必须具有以下尺寸） - icon.png - 40x40; - icon@2x.png - 80x80; - icon2.png - 26x26; - icon2@2x.png - 52x52.	array	[]
variations.initData	不可修改，始终等于””-这是在插件开始时从编辑器发送到插件的数据（例如，如果 `initDataType ==" text"` ，则插件将在运行时接收选定的文本）。	string	“”
variations.initDataType	在编辑器中选择并发送到插件的数据类型：”text”-文本数据，”html”-HTML格式的代码，”ole”-OLE对象数据，”none”-没有数据将从发送给插件。	string	“”
variations.initOnSelectionChanged	指定插件是否在编辑器窗口中监视文本选择事件。	boolean	true
variations.isDisplayedInViewer	指定插件是在查看器模式和编辑器模式下（ `isDisplayedInViewer == true` ）还是仅在编辑器模式下（ `isDisplayedInViewer == false` ）显示。	boolean	true
variations.isInsideMode	指定插件是否必须显示在编辑器面板中而不是它自己的窗口中（仅用于可视非模式插件）。必须始终遵守以下规则：`isModal != isInsideMode` 。	boolean	true
variations.isModal	指定打开的插件窗口是否为模式窗口，即是否必须打开单独的模式窗口（仅用于可视插件）。必须始终遵守以下规则：`isModal != isInsideMode` 。	boolean	true
variations.isSystem	指定该插件是否未在编辑器界面中显示，并在不干扰其他插件的服务器（或桌面编辑器启动）后台启动，以便它们可以同时工作。	boolean	false
variations.isUpdateOleOnResize	指定是否在使用矢量对象绘制类型的编辑器中调整大小时必须重新绘制OLE对象（仅用于OLE对象，即 `initDataType ==" ole"` ）。	boolean	true
variations.isViewer	指定当文档仅在查看器模式下可用时，插件是否可用。	boolean	true
variations.isVisual	指定该插件是可视的（将打开一个窗口以执行某些操作，或在编辑器面板界面中引入一些附加内容）还是非可视的（将提供一个（或多个）按钮）以对文档进行一些转换或操作）。	boolean	true
variations.url	插件入口点，即连接 plugin.js（使用插件所需的基本文件）文件并启动插件代码的HTML文件。有关详细信息，请参见 index.html 部分。	string	“”

插件变体

为什么一个插件可能需要一些变化？答案很简单：插件不仅可以执行某些操作，还可以包含一些设置，例如“关于”窗口和类似的操作。例如，翻译插件：该插件本身不需要可视窗口进行翻译，因为只需按一个按钮即可完成，但其设置和“关于”窗口必须是可视的。因此，如果我们想添加一个关于插件及其作者或插件创建软件的信息的“关于”窗口，则至少需要两个插件变体（翻译本身和设置），或者三个。

所有变体的.html文件必须与 config.json 配置文件一起放置在插件根文件夹中，以使插件正常工作。

index.html

每个插件都在自己的iframe中运行。编辑器将连接在 config.json 插件配置文件中指定的 index.html 文件。 index.html文件是插件的入口点，它连接 plugin.js 文件-使用插件所需的基本文件。

以下是index.html文件的示例代码：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <title>Chess</title>
        <script type="text/javascript" src="https://onlyoffice.github.io/sdkjs-plugins/v1/plugins.js"></script>
        <script type="text/javascript" src="https://onlyoffice.github.io/sdkjs-plugins/v1/plugins-ui.js"></script>
        <link rel="stylesheet" href="https://onlyoffice.github.io/sdkjs-plugins/v1/plugins.css">
        <script type="text/javascript" src="chess.js"></script>
    </head>
    <body style="width: 100%; height: 100%; margin: 0; padding: 0; overflow: hidden;">
        <div id="chess" style="margin: 0; padding: 0;"></div>
    </body>
</html>

<head> ... </ head> 部分引用了插件正确工作所需的所有脚本和样式表的链接（本地和远程，插件使用到的）。它还包括指向plugin.js基本文件的链接，这些链接是使插件正常在编辑器进行工作所必需的，并且包含基本的plugin方法。

主体可以包含 <div> ... </ div> 标记，并在其中插入插件组件的占位符。这些插件组件的行为在 pluginCode.js 文件本身中进行了描述。

plugin.js

任何插件都有 window.Asc.plugin 对象，该对象又具有几种与ONLYOFFICE文档，电子表格和演示文稿编辑器进行交互的方法。
为了使插件正常工作，开发人员必须为 window.Asc.plugin 对象指定两个强制性方法：window.Asc.plugin.init 和 window.Asc.plugin.button 。之后，使用 window.Asc.plugin.callCommand 方法使用内置的 ONLYOFFICE Document Builder API 功能将数据发送到编辑器。

如果插件使用OLE对象运行，则使用 window.Asc.plugin.executeCommand 方法来管理它。

让我们看看如何在helloworld.js插件中完成此操作：

(function (window, undefined) {
    window.Asc.plugin.init = function () {
        this.callCommand(function() {
            var oDocument = Api.GetDocument();
            var oParagraph = Api.CreateParagraph();
            oParagraph.AddText("Hello world!");
            oDocument.InsertContent([oParagraph]);
        }, true);
    };
    window.Asc.plugin.button = function (id) {
    };
})(window, undefined);

初始化插件对象时（window.Asc.plugin.init = function() {...}），编辑器将使用Hello World短语形成一个段落，然后使用 ONLYOFFICE Document Builder API 使用此文本创建文档（在 window.Asc.plugin.callCommand 方法的帮助下 - this.callCommand(function() {...})）。

唯一的确定按钮（window.Asc.plugin.button = function(id) {...}）用于创建文本并完成插件的工作。

这样，可以创建任何其他插件。当前，这些插件不仅支持向编辑器发送文本或带格式的文本，而且还支持OLE对象嵌入（此类示例在此处可用：Chess-国际象棋游戏插件，以及youtube-将YouTube视频嵌入到编辑器页面中）。

示例

可以在以下位置找到更多现有的开源插件示例：https://github.com/ONLYOFFICE/sdkjs-plugins。