首页 默认分类 正文
  • 本文约5855字，阅读需29分钟
  • 45
  • 0

【在线文档】onlyoffice的二次开发

摘要

Onlyoffice 插件基本结构
常规config.json的配置

1. Onlyoffice 插件基本结构

1.1 插件的目录结构如下：

    ├── config.json             # 插件配置文件   

    ├── icon.png                # 插件图标   

    ├── icon@2x.png         # 插件图标   

    ├── index.html              # 插件入口文件

    ├── scripts/code.js         # 插件主程序入口文件

    ├── translations        # 国际化配置

如上所示，插件结构非常简单，里面主要是config.json、index.html和code.js。

1.2 一个常规config.json的配置项如下：

{
    "name":"Invoices", //插件名称
    "guid": "asc.{11700c35-1fdb-4e37-9edb-b31637139601}",//插件ID
    "variations": [
        {
            "description": "Invoices", //插件描述
            "url": "index.html", //页面地址，外部如果不是index.html这里需要更改一下
            "icons": [
                "icon.png",
                "icon@2x.png"
            ], //插件图标，一倍图和二倍图都要配置一下
            "isViewer": false, //仅预览模式时插件是否要启用， 默认值为false
            "EditorsSupport": [
                "word"
            ], //插件支持文档类型， 可选值word、cell、slide
            "isVisual": true, //插件是否具有UI视图
            "isModal": false, //插件是否以弹框形式打开
            "initDataType": "none", //指定编辑器中传递的数据类型，可选值text，html，ole，desktop，desktop- external
            "initData": "", //插件启动时从编辑器传递的数据，与initDataType配置使用
            "buttons": [], //插件可使用的按钮列表
            "events": [
                "onAddComment"
            ] //需要用到的事件需要到这里先注册
        }
    ]
}

1.3 一个常规index.html的配置项如下：

<!DOCTYPE html><html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title></title>
    <!-- 引入JQuery -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
    <!-- 这是插件的js，必须要引入 -->    
    <script src="https://onlyoffice.github.io/sdkjs-plugins/v1/plugins.js"></script>
    <!-- 插件结构里的code.js -->   
    <script src="script/code.js"></script>
    <!-- 这是插件的css，必须要引入 -->   
    <link rel="stylesheet" href="https://onlyoffice.github.io/sdkjs-plugins/v1/plugins.css"></script>
  </head>
  <body>
    <!-- 这里是html区域，设置id然后到code.js里面绑定事件 -->    
        <button id="button">按钮</button>
  </body>
</html>

1.4 一个常规code.js的配置项如下：

(function (window, undefined) {
    window.Asc.plugin.init = function (initData) {
        // 自定义逻辑......   
    }
})(window, undefined)

2.实现插入文本插件

2.1 confing.json和index.html 的内容比较简单，主要看JS里面的实现

(function (window, undefined) {
    window.Asc.plugin.init = function (initData) {
        window.Add = function (field_type) {
            var sScript = "var oDocument = Api.GetDocument();" //获取文档对象
            sScript += "var oParagraph = Api.CreateParagraph();" //创建段落
            sScript += "oParagraph.AddText(\'" + field_type + "\');" //在段落里添加文字
            sScript += "oDocument.InsertContent([oParagraph], {'KeepTextOnly': true});
            //将元素数组插入到文档光标的位置
            window.Asc.plugin.info.recalculate = true; //强制文档重新计算其内容数据
            window.Asc.plugin.executeCommand('command', sScript)； //将数据发回到编辑器
        }
        window.Asc.plugin.button = function (id) {
            if (id === -1) { //被中断或关闭窗口
                this.executeCommand('close', '')
            }
        }
    }
})(window, undefined)

2.2.1 其中InsertContent方法的参数配置如下

InsertContent（arrContent,  [isInLine],  opr）
名称 类型 描述
arrContent Array 要插入的数组元素
IsInLine Boolean 是否内联插入
Opr Object 指定为插入的元素保留文本和段落文档属性，对象如下所示：

{“KeepTextOnly”: true},当为true时，onlyOffice会移除文本内容的所有格式和非文本内容，只保留纯文本内容进行显示。

2.2.2 如遇到KeepOnlyOffice不生效的时候，可能是以下原因导致

1.文本格式一致： KeepOnlyOffice只会保留文本内容，而不保留格式，如果在复制文本的时候在有格式的文本中复制，可能会带上格式，导致无法保留文本
2.不兼容的文本格式：Ony0fice 支持多种文本格式，但其中某些格式可能不兼容 KeepTexi0ny 功能。这时可以尝试使用其他文本格式进行复制。
3..0nyofice 版本过旧: 如果使用的 OnvOfice 版本过旧，可能存在一些 bug 或问题，会导致无法启用办行KeeDlext0ny 功能，这时建议升级到最新版本.

2.2.3 executeCommand配置如下

 executeCommand(type, data, callback)
名称 类型 描述
type string 定义命令类型
data string 定义用JavaScript代码编写的命令，其目的是形成可以插入到结果文档文件中的结构化数据 （格式化段落、表格、文本部分和单独的单词等）。然后将数据发送给编辑者。
callback function 该方法返回的结果

三、粘贴文本

pasteText方法，实现粘贴文本到指定位置。
代码如下：

window.Asc.plugin.executeMethod（"pasteText", [粘贴的文本内容]）

四、获取选中文本

GetSelectedText方法， 返回文档中选中的文本。
代码如下：

function correctText() {
    let sText = null;
    switch (window.Asc.plugin.info.editorType) {
        case "word":
        case "slide": {
            window.Asc.plugin.executeMethod("GetSelectedText", [{
                "Numbering":false, 
                "Math": false,
                "TableCellSeparator": "\n",
                "ParaSeparator": "\n", 
                "TabSymbol": String.fromCharCode(9)
            }],
                function (data) {
                    sText = data;
                    console.log(data)
                })
            break;
        }
        case "cell": {
            window.Asc.plugin.executeMethod("GetSelectedText", [{
                "Numbering": false, 
                "Math": false, 
                "TableCellSeparator": "\n",
                "ParaSeparator": "\n", 
                "TabSymbol": String.fromCharCode(9) 
            }], function (data) {
                if (data == "") {
                    sText = sText.replace(/\t/g, "\n");
                } else {
                    sText = data;
                }
            })
            break;
        }
    }
}

GetSelectedText的参数配置如下：

名称 类型 描述
numbering Object 生成的字符串显示属性
numbering.NewLine Boolean 定义生成的字符串是否将包含行边界
numbering.NewLineParagraph Boolean 定义生成的字符串是否将包含段落行边界
numbering.Numbering Boolean 定义生成的字符串是将包含编号
numbering.Math Boolean 定义生成的字符串是否包含数学表达式
numbering.TableCellSeparator String 定义如何在结果字符串中指定表单元格分隔符
numbering.ParaSeparator String 定义如何在结果字符串中指定段落分隔符
numbering.TabSymbo String 定义如何在结果字符串中指定制表符。

5. 实现添加批注插件

5.1. 返回文档内所有批注 GetAllComments（返回类型为数组类型）；

window.Asc.plugin.executeMethod（"GetAllComments", null,  function (comments) {
    console.log(comments)
}）

5.2. 添加批注 AddComment

window.Asc.plugin.executeMethod("AddComment", [
    {
        "userName": "userName",
        "text": "text"
    }
], function (comment) {
    console.log(comment)
})

调用方法后，onAddComment事件触发，在文档内添加上新的批注

window.Asc.plugin.event_onAddComment = function(comment){
       Comments.push(comment);
       $("#scorllable-container-id").append(makeComment(comment.Id, comment))
}

5.3. 更改批注 changeComment

window.Asc.plugin.executeMethod("ChangeComment", ["1_613"
    {
        "userName": "userName"，
        "text"： "更改批注"
    }
])

调用此方法后，onChangeCommentData事件触发，修改批注内容

window.Asc.plugin.event_onChangeCommentData = function(comment){}

5.4. 删除指定批注 RemoveComments

RemoveComments(包含指定注释的 ID 的数组)

window.Asc.plugin.executeMethod("RemoveComments", ["1_613", "1_612"])

调用此方法后，onRemoveComment事件触发，修改批注内容

window.Asc.plugin.event_onRemoveComment = function(comment){ }

6.在Vue中接入onlyOffice

6.1. 安装：

npm install  -- save @onlyoffice/document-editor-vue;

6.2 将官方文档中的API安装到服务器里，拿到api在服务器的静态地址，用script标签引入到项目的index.html文件中；

<script src="http://IP/web-apps/api/documents/api.js"></script>

6.3 在 template 添加一个 div 作为 Onlyoffice 实例化容器：

<template>
    <div id="onlyoffice"></div>
</template>

6.4 在文本加载完成时， 初始化 onlyoffice 实例：

createEditor () {
  this.editor = new window.DocsAPI.DocEditor('onlyoffice', editorConfig)
}

其中的 editorConfig 配置项如下：

const editorConfig = {
    width: 1200, //编辑器宽度
    height: 1200, //编辑器高度
    documentType: 'word',//编辑器类型，支持word，cell，slide
    //文档配置
    document: {
        fileType: 'word',//文档类型
        key: 'text1.docx',//文档唯一标识
        title: '测试文档.docx',//文档标题
        url: 'http://IP/static/test2.docx',//文档地址
        //文档权限
        permissions: {
            comment: false, //启用评论
            download: true, //启用下载
            edit: true, //启用编辑
            print: true, //启用导出
            review: true //启用预览
        }
    },
    editorConfig: {
        //回调地址
        callbackUrl: 'http://IP/api/v1/onlyoffice/callback',
        lang: 'zh-CN', //设置语言
        //用户信息
        user: {
            group: '技术部',
            id: '124',
            name: 'admin'
        },
        //customization字段相关配置详解：ONLYOFFICE API 文档 - 配置
        customization: {
            forcesave: true, //强制保存
            features: {
                spellcheck: false  //关闭拼写检查
            }
        },
        plugins: [ //配置插件
            'autostart'
        ]
    }
}

其中的 editorConfig.callbackUrl 配置项表示文档编辑服务的回调配置，就是这个配置实现了文档编辑后的保存，保存常见问题如下：
（1）文档编辑服务发送到callbackurl地址的JSON对象详情 https://api.onlyoffice.com/zh/editors/callback#status-4
（2）保存延迟问题一般情况下10s， 如果在onlyoffice中的文件过大， 保存时间也会延长。

7. window.ASC.plugin.Info对象

它存储有关使用该插件的编辑器的所有信息,
info对象常见参数如下：

参数名称 描述 类型 例
guid 当前文档插件中的guid String asc.{6B6715E5-A558-4F70-8058-40704CD659CF}
height 当前文档高度 Number 100
width 当前文档高度 Number 100
recalculate 重新计算 Boolean window.Asc.plugin.info.recalculate = true
userId 用户Id String window.Asc.plugin.info.userId
userName 用户名称 String window.Asc.plugin.info.userName

根据window.Asc.plugin.info.userId / window.Asc.plugin.info.userName可以获取到vue中挂载的onlyoffice实例中配置的userId/userName

评论
友情链接