onlyoffice插件在插件外调用并传值的问题

抬头30°的微笑05-06253阅读0评论

前言

在线文档浏览管理平台集成在线浏览word时遇到一个需求,：

需要做到在初始化时，进行对指定的关键词进行高亮显示。

可以在点击文档外的某个关键词时，可以调用插件方法进行搜索并高亮。

在插件外点击关键词时，用指定关键词进行替换。

当时听到这个需求的时候觉得很棘手, 不过好在已经实现了, 目前也在使用过程中了, 特来记录下，帮助更多需要的小伙伴。

重点内容：

1、如何调用插件内的方法

2、如何进行传参数，传参有什么要求

我用的版本是8.2.2.22 测试是可用的

下面就来一一解决这些问题：

先来看第一个，如何调用插件内的方法

————————————————

我们先来看下docEditor
docEditor是new DocsAPI.DocEditor(..., ...)的对象
docEditor.value = new DocsAPI.DocEditor('placeholder', onlyOfficeConfig.value);
看一下这个docEditor都有什么内容？我们发现

因些我们可以调用docEditor的serviceCommand方法来进行内部方法的调用。

// 假设onlyoffice是你要传的参数
docEditor.serviceCommand("onlyoffice");
// 当然你也可以传入两个参数
docEditor.serviceCommand("onlyoffice", "测试内容");

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

window.parent.Common.Gateway.on('internalcommand', function(data){
    console.log(data.command); // 接受到onlyoffice参数
    console.log(data.data); // 接受到测试内容参数
});

不管传几个参数，接收参数的形参都是第一个参数通过data.command获取, 第二个通过data.data获取

实现方法

既然上面插件都定义好了，关键是插件的格式，需要js以及html文件，具体可查看官方文档，自定义插件的开发章节。下面我们进行相应需求的开发：
高亮指定文字，我们可以调用相应的API进行操作，方法有很多种，可以直接搜索后进行高亮，也可以根据指定位置进行高亮。

const oDocument = Api.GetDocument();
var oRange =oDocument.GetRange(Asc.scope.startPosition,Asc.scope.endPosition);
oRange.SetHighlight(Asc.scope.color);

条条道路通罗马，路通了，具体的实现方法可以参考API灵活实现。

同样的搜索替换也可以调用相应的API进行实现，这里就不在一一描述了。

常见问题

插件需要怎么用？

开发好的插件需要上传到Onlyoffice的插件指定目录下。我这里是用的docker部署的8.0.2的版本，将插件拷贝到/var/www/onlyoffice/documentserver/sdkjs-plugins即可。注意文件夹命名哦。

为什么插件虽然上传了，但是调用还是提示没有找到对应的方法？

这个问题困扰了我好久，后来调试得知。在文档初始化后，插件也是要启用后才可以的哦。

启用插件有两种，第一种手动，第二种自动。

手动的话就是直接在插件选项卡下，点击自定义的插件进行启用即可。

自动的话就是在docEditor进行初始化时，在配置项里面加上plugins的配置，指定自动启动插件的id即可。

3.上述步骤都启用了，怎么还是不生效？

是因为插件异步机制导致，在自定义插件未初始化完成后，就调用了插件内的方法，这时是有问题，解决方法就是在插件内部可以进行在初始化完成后向上层发送消息，告知已初始化完成。

window.parent.Common.Gateway.sendInfo({
 	            command: 'pluginInitialized',
 	            data: { 
 					status:200,
 					message: '插件初始化成功！',
 					}
 	        });

在上层调用处监听window.addEventListener(‘message’, handlePluginMessage); 或者在初始化的配置中监听onInfo方法，然后在接收到的参数中进行判断具体的插件发送消息。

这个handlePluginMessage里面是所有方法的，具体可以调试查看，这里不再描述了，到了这一步，基本也就完成了。

写的不好，大致思路就是这样，如有问题，可以评论进行多交流。