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

我正在尝试将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 );
    }
    });

这是失败的

Uncaught TypeError: undefined is not a function | quill.js:8020

因为在另一端我有一个简单的哈希,并且quill期望特定类型的对象(InsertOp,http://quilljs.com/docs/editor/deltas/等).

任何想法如何使其工作?

解决方法:

问题是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’s OT API这样的平台化解决方案,或者您可以使用像ShareJS这样的库来推销自己的解决方案.

上一篇:富文本编辑器的使用


下一篇:javascript – Quill.js扩展了未在delta中捕获的Blot / Parchment更改