javascript - 如何结合Quill富文本编辑器和socket.io来交换Deltas

我正在尝试结合 Quill 富文本编辑器和 socket.io。我想要一个类似于 Google 文档的编辑器，人们可以在其中同时进行编辑。

我正在努力通过网络发送和应用“文本更改”事件，使用的代码类似于:

fullEditor.on('text-change', function(delta, source) {
  if (source === 'user') {
    socket.emit('text change', {'who': my_id, 'delta': JSON.stringify(delta)});
  }
});


socket.on('text change', function(msg){
  if(msg.who != my_id) {
      var del = JSON.parse(msg.delta);
      var Delta = fullEditor.getContents().constructor;
      var delta = new Delta(del.startLength,del.endLength,del.ops);
      fullEditor.updateContents( delta );
    }
    });

这是失败的



在另一端，我有一个简单的哈希，而 quill 需要特定类型的对象(InsertOp、http://quilljs.com/docs/editor/deltas/ 等)。

任何想法如何使它工作？

最佳答案

问题是 updateContents 需要一个 Delta 对象，而当您创建一个对象时，Delta 构造函数需要一个 Operations 对象数组。

最新版本 (v0.14.0) 更新 updateContents 以采用普通的 javascript 对象，因此您应该能够执行以下操作:

socket.on('text change', function(msg){
  if(msg.who != my_id) {
    var del = JSON.parse(msg.delta);
    fullEditor.updateContents( del );
  }
});

请注意，要实现像 Google Docs 这样的实时协作，您还需要某种冲突解决方案。最简单的是像 GoInstant's OT API 这样的平台化解决方案，或者您可以使用像 ShareJS 这样的库来推出自己的解决方案。

关于javascript - 如何结合Quill富文本编辑器和socket.io来交换Deltas，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/23970598/