多人同步协同编辑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 接受端执行
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。

		自动登录	找回密码
密码			立即注册

多人同步协同编辑Demo（可粘贴可撤销）

0 个回复

SpreadJS 高级认证

讲师达人

GrapeCity

悬赏达人

SpreadJS 认证