基于插件实现和onlyoffice编辑器的数据通信

插件编写

  1. config.json

    重要

    文件中 isSystem: true。 isSystem：只要编辑器启动，插件在后台工作。

  2. code.js

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    (function(window, undefined){
        
        window.Asc.plugin.init = function() {
            console.log("插件初始化")
            // 插件监听页面的具体操作指令
            window.parent.Common.Gateway.on('internalcommand', function(data){
                console.log(data);
            });
        };
            window.Asc.plugin.button = function(id) {
        };
        
    })(window, undefined);

定义指令

getText： 获取选中文本
insertText: 在光标处插入文本

  1. 插件中接收到的数据结构

    1
    {command:"具体指令",data:{"携带数据"}}

  2. 判断指令内容

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
     
          window.parent.Common.Gateway.on('internalcommand', function(data){
    	console.log(data); // 接受到123参数console.log(data.data); // 接受到321参数
    	var data_ = data.data
    	switch (data.command){
    		case "insertText":
    			let text = "${"+data_.text+"}"
    			window.Asc.plugin.executeMethod ("PasteText", [text]);
    			if(window.Asc.plugin.info.editorType == 'cell'){
    				CorrectText('insertText')
    			}
    			break;
    		case 'getText':
    			CorrectText('getText')
    			break
    	}
    });
     
          function CorrectText (command) {
    	let data = {
    		command:command,
    		text:""
    	}
    	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 (e) {
    				let text = e.trim()
    				data.text = text
    				window.parent.parent.postMessage(JSON.stringify(data),'*');
    			});
    			break;
    		}
    		case 'cell': {
    			Asc.scope.command = command;
    			window.Asc.plugin.callCommand (function () {
    				var oWorksheet = Api.GetActiveSheet();
    				var oActiveCell = oWorksheet.GetActiveCell();
    				let str = oActiveCell.Text
    				if(str.indexOf("${") != -1){
    					str = str.substring(2,str.length-1)
    				}
    				let data = {
    					command:Asc.scope.command,
    					sheetName:oWorksheet.Name,
    					text:str,
    					x:oActiveCell.Row,
    					y:oActiveCell.Col
    				}

    				localStorage.setItem('dataInfo', JSON.stringify(data))
    			}, false,false,function(){
    				window.parent.parent.postMessage(localStorage.getItem('dataInfo'),'*');
    				localStorage.removeItem('dataInfo')
    			});
    			break;
    		}
    	}
    }

页面发出指令

  1. 实列化编辑对象

    docEditor = new DocsAPI.DocEditor(元素id,config);

  2. 发出指令

    docEditor.serviceCommand(具体指令, {数据});

  3. 定义方法

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14

    //获取内容
    function getText(){
        docEditor.serviceCommand("getText", {});
    }
    //添加内容
    function setText(value){
         let data = {
                text: value
         };
         docEditor.serviceCommand("insertText", data);
    }


  4. 接收指令结果

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20

    //接收 编辑器的数据
    window.addEventListener('message', postMessage)
       
    function postMessage(res) {
        if (typeof res.data === 'string') {
            let data = JSON.parse(res.data)
            if (data.command == 'insertText' || data.command == 'getText'){
                console.log("text:"+data.text)
                if (data.sheetName) {
                    console.log("sheetName:"+data.sheetName)
                }
                if (data.command == 'insertText' && data.x != null && data.y != null) {
                    console.log("x:"+data.x)
                    console.log("y:"+data.y)
                }
            }
        }
    }

测试结果

word文件



excel文件