OnlyOffice 如何在应用触发其内部执行动作

Web整合Onlyoffice方式，本质上是嵌入一个iframe，既然是iframe那就可以通过以下方式进行命令的交互

<iframe id="iframe" :src="TODO SRC"></iframe>

const iframeWin = document.getElementById('iframe').contentWindow;
iframeWin.postMessage(JSON.stringify(this.dataMessage), '*');

通过查阅web-apps发现 onlyoffice的 iframe 相关内容如下：

 了解到实际上我们获取嵌入的onlyoffice可以采用如下方式

let onlineOfficeEditorIframeList = document.getElementsByName("frameEditor");
if(onlineOfficeEditorIframeList){
   let onlineOfficeEditorIframe = onlineOfficeEditorIframeList[0];
   let iframeWin = onlineOfficeEditorIframe.contentWindow;
   iframeWin.postMessage(JSON.stringify(this.dataMessage), '*');
}              

查看web-apps、sdkjs相关代码，所有上层的messge都会转发到sdkjs进行处理

具体在 editorscommon.js 中进行处理，翻看处理过程，除了 help中所提到的各种消息或者event，此处还有一个 onExternalPluginMessage 消息。接下来我们可以使用这个 消息 实现应用和onlyoffice的交互。

在sdkjs-plugins翻看找到如下插件demo：externallistener

触发：

window.onload = function() {

	var dataMessage = {
		frameEditorId : "iframeEditor",
		guid : "asc.{A8705DEE-7544-4C33-B3D5-168406D92F72}",
		type : "onExternalPluginMessage",
		data : {
			type: "close",
			text: "text"
		}
	};

	document.getElementById("button1").onclick = function()
	{
		dataMessage.data.type = "insertText";
		dataMessage.data.text = "Text1";
		var _iframe = document.getElementById("frameEditor");
		if (_iframe)
			_iframe.contentWindow.postMessage(JSON.stringify(dataMessage), "*");
	};
	document.getElementById("button2").onclick = function()
	{
		dataMessage.data.type = "insertText";
		dataMessage.data.text = "Text2";
		var _iframe = document.getElementById("frameEditor");
		if (_iframe)
			_iframe.contentWindow.postMessage(JSON.stringify(dataMessage), "*");
	};
	document.getElementById("buttonClose").onclick = function()
	{
		dataMessage.data.type = "close";
		dataMessage.data.text = "";
		var _iframe = document.getElementById("frameEditor");
		if (_iframe)
			_iframe.contentWindow.postMessage(JSON.stringify(dataMessage), "*");
	};

	document.getElementById("buttonSave").onclick = function()
	{
		dataMessage.guid ="asc.{59595F4D-2DAA-4A8F-94C4-E037D477D57C}";
		dataMessage.data.type = "save";
		dataMessage.data.text = "Text1";
		var _iframe = document.getElementById("frameEditor");
		if (_iframe)
			_iframe.contentWindow.postMessage(JSON.stringify(dataMessage), "*");
	};

};

监听：

/**
 *
 * (c) Copyright Ascensio System SIA 2020
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *     http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 *
 */
(function(window, undefined){

    window.Asc.plugin.init = function()
    {
		// none
    };

    window.Asc.plugin.button = function(id)
    {
    };

    window.Asc.plugin.onExternalPluginMessage = function(data)
	{
		console.log("window.Asc.plugin.onExternalPluginMessage, data:", data);
		switch (data.type)
		{
			case "close":
			{
				this.executeCommand("close", "");
				break;
			}
			case "insertText":
			{
				Asc.scope.text = data.text; // export variable to plugin scope
				this.callCommand(function() {
					var oDocument = Api.GetDocument();
					var oParagraph = Api.CreateParagraph();
					oParagraph.AddText(Asc.scope.text);
					oDocument.InsertContent([oParagraph]);
				}, false);
				
				break;
			}
			case "executeCommand": {
				this.info.recalculate = true;
				this.executeCommand("command", data.text);
				break;
			}
			case "save": {				
				this.executeCommand(this.callCommand(function() {
					console.log("window.Asc.plugin.onExternalPluginMessage key:", Api.GetDocKey());
					Api.Save();
				}, true));
				break;
			}
		}
	};

})(window, undefined);

其中 callCommand 参数注意下

   / * @param {Function} func Function to call
	 * @param {boolean} isClose
     * @param {boolean} isCalc
	 * @param {Function} callback Callback function
	 */
	Plugin.callCommand = function(func, isClose, isCalc, callback)

如果 第二个参数不设置，则默认为close，此时相当于调用完一次 onExternalPluginMessage 后，插件就会执行close 动作，导致对应插件无法再次接收 消息。

通过 onExternalPluginMessage 扩展消息的方式，可以方便的实现 外部应用调用onlyoffice 的内部方法。