如何结合Quill Rich Text Editor和socket.io来交换Deltas

Question

我正在尝试将Quill Rich Text Editor和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 );
    }
    });

这是失败的

未捕获的TypeError：undefined不是函数| quill.js：8020

因为在另一端我有一个简单的哈希，并且quill期望特定类型的对象（InsertOp， http ：//quilljs.com/docs/editor/deltas/等）。

任何想法如何使其工作？

Answer 1

问题是updateContents期望一个Delta对象，当你创建一个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的OT API这样的平台化解决方案，或者您可以使用像ShareJS这样的库来实现自己的解决方案。