onlyoffice插件传值（接收外部数据）的问题

目录

前言

难点分析 

传参

实现需求

---

前言

管理平台集成在线编辑word时遇到一个需求, 需要做到在外部定义一个按钮, 点了这个按钮后会弹出一个列表, 在选择了某条数据后需要把这条数据（包过边框）插入到word文档里面, 当时听到这个需求的时候觉得很棘手, 不过好在已经实现了, 目前也在使用过程中了, 该功能已经实现了快2个月了, 现在才想起来记录下

难点分析 

这个功能的难点主要就两点：

• 如何将表格也带入文档 
• 如何将数据插入到文档（传参问题）

onlyoffice可以直接扩展我们自己的插件, 在我深入了解插件的api后发现可以直接将html代码插入就能做到把表格带入文档了, 因此第一个问题也就解决了, 难的是第二个问题, 我如何在插件当中接受外部的数据, 当时我在这个问题上困扰了好久, 因为这涉及到iframe跨域的问题, 我换了好多种方式都不行, 后面我是在stackoverflow上找到的解决方案（链接在文章末尾）

传参

调用docEditor的serviceCommand方法

// 假设123是你要传的参数
docEditor.serviceCommand("123");

// 当然你也可以传入两个参数
docEditor.serviceCommand("123", "321");

docEditor是new DocsAPI.DocEditor(..., ...)的对象

然后在插件当中添加以下的监听事件（该事件需要放在AscPlugin.init的方法当中）：

window.parent.Common.Gateway.on('internalcommand', function(data){
    console.log(data.command); // 接受到123参数
    console.log(data.data); // 接受到321参数
});

第一个参数通过data.command获取, 第二个通过data.data获取 

文章末尾附带插件源码 

实现需求

既然已经解决了传参的问题就可以来实现将表格插入到文档当中了, 其实就是插入html即可, 我看了官方的api有现成的方法可用

官方文档：ONLYOFFICE Api Documentation - PasteHtml

在插件中使用以下代码即可

// 插入html （也可以插入img标签, 不过需要图片是base64格式才能显示出来）
window.Asc.plugin.executeMethod('PasteHtml', '你的html标签');

// 插入文本
window.Asc.plugin.executeMethod('PasteText', '文本');

到这里就很简单了, 比如我需要插入html, 那么我就需要调用插入html的方法, 只需要在调用docEditor.serviceCommand方法, 第一个参数我就传入PasteHtml, 指定调用这个方法, 第二个参数我就传入相应的html标签即可, 然后在上述的监听事件当中加入这个代码window.Asc.plugin.executeMethod(data.command, data.data);这样就实现了插件接收外部的参数, 并插入到文档内

---

参考

• ONLYOFFICE Api Documentation - PasteHtml
• asp.net - How to send external data to OnlyOffice plugin - Stack Overflow

插件源码： MyTestProject/onlyoffice-plugin at master · VoidAndNullity/MyTestProject · GitHub

---

👍点赞，你的认可是我创作的动力 ！
🌟收藏，你的青睐是我努力的方向！
✏️评论，你的意见是我进步的财富！