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

Question

I am trying to combine Quill Rich Text Editor and socket.io. I would like to have an editor similar to Google docs, where people can edit simultaneously.

I am struggling to send and apply 'text-change' events across the wire, using code similar to this:

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 );
    }
    });

This is failing with

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

as on the other end I have a simple hash, and quill expects objects of specific type (InsertOp, http://quilljs.com/docs/editor/deltas/ etc.).

Any ideas how to make it work?

Answer 1

The problem is that updateContents is expecting a Delta object and while you do create one, the Delta constructor is expected an array of Operations objects.

The newest version (v0.14.0) updates updateContents to take a plain javascript object so you should be able to do:

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

Note to implement realtime collaboration like Google Docs you will also need some sort of conflict resolution. The simplest is a platformized solution like GoInstant's OT API or you can roll your own with a library like ShareJS .