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 的内部方法。