onlyoffice连接器(connector)开发使用精讲二次开发深入开发【二】

曹瑞曹瑞

于 2024-09-30 10:28:07 发布

阅读量408

点赞数 9

分类专栏： onlyoffice 文章标签： onlyoffice

本文链接：https://blog.csdn.net/lz610756247/article/details/142640761

版权

onlyoffice 专栏收录该内容

7 篇文章 4 订阅

订阅专栏

前言

这篇教程开始，全部为进阶版使用，你需要先熟悉使用最基础的连接器教程，如果你没有正常接入，请参考教程【一】：onlyoffice连接器(connector)开发使用精讲二次开发深入开发【一】_onlyoffice 连接器-CSDN博客

该教程为word的【二次开发高级功能】使用实例，版本由【曹瑞】维护，无商业风险。同时会附带有demo以及文档说明。

说明文档：onlyoffice进阶版说明文档

API文档：onlyoffice进阶版 API文档

一、表单操作

表单操作用于实现word与form的双向绑定过程，比如：合同、各类型文档使用only(左边)+form(右边)结构进行展示，实现同步操作可以边修改表单边更新合同，也可以边修改合同边更新表单，如图：【图1】使用合同模板发起，【图2】接入左右联动。文档：http://47.94.91.67/#/onlyoffice_doc/main

onlyoffice操作双向的代码API【节选】，实例可以再我的文档中找到，代码如下：

connector.executeMethod(
    "SetFormValue",
    ["1775", '输入一段文字'],
    null
);

connector.executeMethod(
    "GetFormValue", 
    ["1775"],
    function (value) {
        console.log(value);
    }
);

表单操作是未来所有业务级别系统必然要走的一条路，所见即所得实时同步更新，这个也是开发者需要学习的一个做产品的思维。

上面只是一个简单的展示，一整套功能其实代码量很大，从模板管理、模板动态设计、动态字段绑定、模板层转发、UIE抽取、AI风险校对、常规风险校对等等是一个完全的体系，这一整套如果后面有时间，我尝试重新用only做一个快速接入套件吧。

二、事件

此次增加了3个事件作为基础版本功能：1、文档内部点击批注监听；2、取消点击批注监听；3、点击文字监听；

        1、文档内部点击批注监听；2、取消点击批注监听；

        这两个功能是用监听实现当前选中或者是否选中批注。当然还有其他的API可以直接实现，这里不做展示。

        文档：http://47.94.91.67/#/onlyoffice_doc/main

var currentComment = null;

// 文档内部点击批注监听
connector.attachEvent(
    "onInnerClickComment", 
    function(data){
        console.log(data);
        currentComment = data.id;
    }
);

// 取消选中监听
connector.attachEvent(
    "onClickCancelComment", 
    function(){
        console.log('取消选中批注');
        currentComment = null;
    }
);

3、是否点击文字监听；该功能需求是：希望点击文档空白时候，外部form有动作，点击文字时候保持不变。实际上就是根据点击动作做自己的业务逻辑。

文档：http://47.94.91.67/#/onlyoffice_doc/main

connector.attachEvent(
    "onClickText", 
    function(data){
        console.log(data.isText);
    }
);

三、ApiRange

range对象是office原生的概念，这个需要开发者自己看懂。对于range的功能其实应该还有很多很多可以做，官方放出来的功能远远不够。后续逐步开发吧。

ScrollTo实现文档滚动到定点位置。range对象很多时候都要用到。paragraph、search、控件、组件等所有包含文字对象的地方都要用到，所以【滚动位置】就很有必要了。

文档：http://47.94.91.67/#/onlyoffice_doc/main

connector.callCommand(function () {
    var oDocument = Api.GetDocument();
    var oRange = oDocument.GetRangeBySelect();
    oRange.ScrollTo();
}, function (data) {});

四、ApiDocument

文档对象此次初步先接入3个api：1、获取当前文档协作用户；2：强制保存；3：选中左侧标题树；

1、获取当前文档协作用户；这个需要开发者自己先实现文档协作，也就是：config->key相同，user不同，打开两个页面就能看到效果。如【图3】。

文档：http://47.94.91.67/#/onlyoffice_doc/main

connector.callCommand(function () {
    var oDocument = Api.GetDocument();
    console.log(oDocument.GetOnlineUser());
}, function (data) {});

2：强制保存；这个用来处理API操作过文档后，比如：range.AddText('xxxxx')后，调用Api.Save()接口是没有效果的，或者说word文档是用wps创建，调用Api.Save()没有效果的情况。

文档：http://47.94.91.67/#/onlyoffice_doc/main

connector.callCommand(function () {
    var oDocument = Api.GetDocument();
    oDocument.forceSave2();
}, function (data) {});

3：选中左侧标题树；这个其实就是文档结构树了，用API来选中标题和所属内容。现在需要先点开标题树，调用API才有效果。如【图4】，后面得闲的话连同自动打开标题动作一起再完善一下吧。

文档：http://47.94.91.67/#/onlyoffice_doc/main

/**
 * 左侧【标题】导航点开才有效果
 */
connector.callCommand(function () {
    var oDocument = Api.GetDocument();
    oDocument.SelectTitleItem(1);
}, function (data) {});