Derrick.Jiao 发表于 2022-8-9 17:08:23

多人同步协同编辑Demo(可粘贴可撤销)

本帖最后由 Lynn.Dou 于 2023-9-13 15:17 编辑

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

那么想要通过监听命令来实现简单协同,可以参考这篇文章
https://gcdn.grapecity.com.cn/showtopic-75347-1-1.html

想实现可撤销的示例,可以参考这篇文章
https://gcdn.grapecity.com.cn/showtopic-73728-1-25.html

那最原始通过命令的方式为什么无法将粘贴命令同步呢?因为对于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 接受端执行
                constredo =function (params){
                        console.log(params,'params');
                        undoManager1.redo.apply(undoManager1, );

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

                }
                constexcute = (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, );
                }

以上这个就是大致的思路,具体请参考附件demo。
页: [1]
查看完整版本: 多人同步协同编辑Demo(可粘贴可撤销)