后疫情办公时代——你需要的多人同步协同编辑Demo（可粘贴可撤销）

新冠病毒的疫情使得在线办公成为了一个常态，这使得在线文档成为了时下的热点。其中在线协同表格是在线文档的重要一个组成部分，纯前端表格在在线协同表格上有着得天独厚的优势：本身已经实现了单人操作在线文档的基本功能，并且身为控件，用户只需引入就可以在项目工程中为特性的业务赋予在线表格的能力。这样开发者在使用本文介绍内容后，只需要在其基础上自行实现对应的协同功能，就可以将本身的单人操作变为协同操作。

最近也有很多学员想要通过我们的命令来作为协同的主要实现手段，但是参考了一些教程之后，发现有些操作无法进行同步，例如粘贴以及粘贴之后的撤销操作。这篇教程主要就是分享这个实现思路。

正式开始内容介绍之前，我们先为大家介绍命令机制。

通过监听命令来实现简单的协同操作

何为命令机制：

命令就是将一步或多步的操作封装成一个可以执行的命令，执行这样的命令并传入对应的参数，就可以执行相关的一连串操作。并且操作的对象或范围均可以通过参数的调整来指定。命令的相关方法调用参考下面的API：

https://demo.grapecity.com.cn/spreadjs/help/latest/content/SpreadJS~GC.Spread.Commands.CommandManager.html

命令究竟有什么实际的意义呢？

首先，纯前端表格默认会将所有的用户UI操作封装成命令去执行（内置命令），而我们通常的代码设置并没有通过命令来执行。这样就可以用来区分一个操作到底是用户UI操作（最终用户使用时的操作），还是代码逻辑进行的操作（程序员通过写代码完成，即程序内部的运行逻辑）。

其次，命令本身可以设置是否可以被撤销（undo），结合上一条就可以做到将用户的操作进行撤销，但是程序执行的代码操作不会被进行撤销的操作。在实际应用中有很重要的价值，举个例子：

SpreadJS默认初始化的电子表格是一个空表格，我们经常遇到打开页面后需要加载一个有数据的表格这样的场景，我们往往会将表格初始化的操作通过代码在js中运行来实现这样的效果。当我们加载好表格之后，在页面上按ctrl+z进行撤销，会发现设置的表格不会被撤销。这就是因为程序执行的代码操作不是命令所以不会被撤销的结果。而用户在表格上修改的任何操作均可以被撤销，撤销的同时不会影响之前代码设置这部分的内容。

命令对于在线协同的应用：

命令的机制我们可以分清操作到底是代码执行的还是用户UI去操作的，而在线协同的场景中需要同步的内容就是用户UI的相关操作。所以我们只需要有一个监听的机制，能监听到所有的命令，然后按照顺序进行同步，就可以做到一个简单的在线协同操作了。

而在命令command中是可以添加一个anyscLicenser用于收集用户操作触发的命令的：

spread.commandManager().addListener("anyscLicenser",function(){
    for(var i=0;i<arguments.length;i++){
        var cmd = arguments[i].command;
        console.log(cmd);
    }
                });

通过这样的监听，我们就可以实现一个简单的多人同步的效果。而命令本身是可以自定义的，我们可以将提供给用户操作的接口（input，按钮，下拉等）的实现逻辑封装成一个个自定义命令，就像附件的demo这样。这样就可以做到通过命令来收集用户在表格上的操作，来完成一个简单的协同。

这里要注意的是，虽然有命令这样的机制，但其初衷并不是为了协同而设置的，所以有些情况下源生的命令并不能完全的符合协同的实现，需要根据实际情况自己进行改造来满足。提供的demo以及命令实现的方式可当做思路可供参考。

demo下载地址：https://gcdn.grapecity.com.cn/forum.php?mod=attachment&aid=ODY2MjZ8OTBlY2E0NWF8MTY3MTc5MzE5Mnw2MjY3Nnw3NTM0Nw%3D%3D

可粘贴柯撤销的多人协同

那最原始通过命令的方式为什么无法将粘贴命令同步呢？因为对于clipboardPaste命令，禁止将工作表的一个区域从工作簿复制到另一个工作簿，但允许外部粘贴。因此，有一种解决方法可以重置命令选项的fromSheet和fromRanges。附上核心代码

  var undoManager1 = spread1.undoManager();
                var oldExecute = commandManager.execute;
        commandManager.execute = function () {
                        console.log(arguments,'execute');
                        excute(...arguments)
            return oldExecute.apply(this, arguments);
        };

                var undoManager = spread.undoManager();
                var oldUndo = undoManager.undo;
        undoManager.undo = function () {
                        undo(...arguments)
            return oldUndo.apply(this, arguments);
        };
        var oldRedo = undoManager.redo;
        undoManager.redo = function () {
                        redo(...arguments)
            return oldRedo.apply(this, arguments);
        };

                // websocket 接受端执行
                const  redo =function (params){
                        console.log(params,'params');
                        undoManager1.redo.apply(undoManager1, [params]);

                }
                const  undo =function (params){
                        console.log(params,'params');
                        undoManager1.undo.apply(undoManager1, [params]);

                }
                const  excute = (params)=>{
                        console.log(params,'params');
                        var params1 = params;
                        if(params1.cmd === 'clipboardPaste'){
                                params1 = Object.assign({}, params1);
                                params1.fromSheet=spread1.getSheetFromName(params1.sheetName);
                        }
            commandManager1.execute.apply(commandManager1, [params1]);
                }

demo下载地址：https://gcdn.grapecity.com.cn/forum.php?mod=attachment&aid=MjI1NTE3fDE4NGM0YWY3fDE2NzE3OTMxNzZ8NjI2NzZ8MTUyMTAw

大家如果感兴趣自行按照demo下载地址体验即可。

拓展阅读

React + Springboot + Quartz，从0实现Excel报表自动化

电子表格也能做购物车？简单三步就能实现

使用纯前端类Excel表格控件SpreadJS构建企业现金流量表