如何結合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這樣的庫來實現自己的解決方案。