使用docker部署了onlyoffice服务器,使用的vue组件库@onlyoffice/document-editor-vue,初始化编辑器editor。现在想要插件获取编辑器组件所在页面比如下面的button中点击按钮后向插件传送数据,要怎么进行。
// editor编辑器
<template>
<button @click="sendMessage">click</button>
<div ref="officeDoc">
<DocumentEditor
id="docEditor"
documentServerUrl="https://onlyoffice-document-server.ctyun.cn:9443/"
:config="config"
:events_onDocumentReady="onDocumentReady"
:onLoadComponentError="onLoadComponentError"
/>
</div>
</template>
插件实例中给出了一个示例(https://github.com/ONLYOFFICE/sdkjs-plugins/tree/develop/externallistener),这里html加载的编辑器使用的是
<iframe id="frameEditor" src="TODO: url to editor"></iframe>,并不是常用的new DocsAPI.DocEditor()方法。
现在在vue组件页面上,找到对应iframe元素进行相似操作,插件内的onExternalPluginMessage并没有起作用。
const sendMessage = () => {
const editor = officeDoc.value.querySelector('iframe')
console.log(editor)
const dataMessage = {
frameEditorId : "iframeEditor",
guid : "asc.{00000000-0000-0000-0000-000000000001}",
type : "onExternalPluginMessage",
data : {
type: "info",
msg: 'o123',
}
};
editor.contentWindow.postMessage(JSON.stringify(dataMessage), "*");
}