如何使用Quill存储组合更改？

Question

我开始使用Quill，我需要保存用户在文档中所做的更改，如果可能的话，组成它们，所以我不需要按操作存储操作。

为了实现这一点，我正在监视'text-change'事件，并且每个操作都存储在我的应用程序的数据库中。不时（每分钟），我将文档中的更改与先前的文档状态进行组合，并在此合成的结果与先前的文档状态之间执行差异，存储diff的结果，并删除先前的操作，因为他们在差异结果。

要获取先前的文档状态，最初我使用原始文档delta。然后，当存储diff时，我只是用数据库中存在的diff来组合原始文档delta。例如：

原始文件delta：{"ops":[{"insert":"Evaluation Only. Created with Aspose.Words. Copyright 2003-2018 Aspose Pty Ltd.","attributes":{"size":"16px","font":"Calibri","bold":true,"color":"#FF0000"}},{"insert":"\n","attributes":{"paragraph":true,"spacing_before":"0px","spacing_after":"10.67px","indent":0,"text_indent":"0px","line_spacing":"17.27px"}},{"insert":"Test","attributes":{"size":"14.67px","font":"Calibri","color":"#000000"}},{"insert":"s","attributes":{"size":"14.67px","font":"Calibri","color":"#000000"}},{"insert":"\n","attributes":{"paragraph":true,"spacing_before":"0px","spacing_after":"10.67px","indent":0,"text_indent":"0px","line_spacing":"17.27px"}}],"page_setup":{"left_margin":"113.4px","top_margin":"94.47px","right_margin":"113.4px","bottom_margin":"94.47px"}}

第一次改变：{"ops":[{"delete":80}]}

第二个变化：{"ops":[{"retain":5},{"insert":"\n","attributes":{"spacing_before":"0px","spacing_after":"10.67px","text_indent":"0px","line_spacing":"17.27px"}}]}

第三个变化：{"ops":[{"retain":6},{"insert":"A","attributes":{"color":"#000000"}}]}

我使用的代码如下所示：

var diffs = result.diffs;
var deltas = result.deltas;

var lastComposedDelta = null;

for (var i = 0; i < diffs.length; i++) {
    var currentDelta = newDelta(diffs[i].Value);

    if (lastComposedDelta == null) {
        lastComposedDelta = currentDelta;
    } else {
        lastComposedDelta = lastComposedDelta.compose(currentDelta);
    }
}

var composedDeltas = lastComposedDelta;

for (var i = 0; i < deltas.length; i++) {
    var currentDelta = newDelta(deltas[i].Value);

    if (composedDeltas == null) {
        composedDeltas = currentDelta;
    } else {
        composedDeltas = composedDeltas.compose(currentDelta);
    }
}

var diffDelta = composedDeltas;
if (lastComposedDelta != null) {
    diffDelta = lastComposedDelta.diff(composedDeltas);
}

这种差异的结果是：{"ops":[{"delete":80},{"retain":5},{"retain":1,"attributes":{"paragraph":null,"indent":null}},{"attributes":{"color":"#000000"},"insert":"A"},{"attributes":{"paragraph":true,"spacing_before":"0px","spacing_after":"10.67px","indent":0,"text_indent":"0px","line_spacing":"17.27px"},"insert":"\n"}]}

我遇到的问题是用户插入新行并缩进它时，例如。这种操作的增量是：

新行：{"ops":[{"retain":8},{"insert":"\n"}]}

缩进：{"ops":[{"retain":9},{"retain":1,"attributes":{"indent":1}}]}

然后，当我尝试使用上面的代码来区分文档时，它会给出错误：

Uncaught Error: diff() called with non-document

“lastComposedDelta”的价值：{"ops":[{"insert":"Tests","attributes":{"size":"14.67px","font":"Calibri","color":"#000000"}},{"insert":"\n","attributes":{"spacing_before":"0px","spacing_after":"10.67px","text_indent":"0px","line_spacing":"17.27px"}},{"attributes":{"color":"#000000"},"insert":"A"},{"attributes":{"paragraph":true,"spacing_before":"0px","spacing_after":"10.67px","indent":0,"text_indent":"0px","line_spacing":"17.27px"},"insert":"\n"},{"delete":80},{"retain":5},{"retain":1,"attributes":{"paragraph":null,"indent":null}},{"insert":"A","attributes":{"color":"#000000"}},{"insert":"\n","attributes":{"paragraph":true,"spacing_before":"0px","spacing_after":"10.67px","indent":0,"text_indent":"0px","line_spacing":"17.27px"}}]}

“composedDeltas”的价值：{"ops":[{"insert":"Tests","attributes":{"size":"14.67px","font":"Calibri","color":"#000000"}},{"insert":"\n","attributes":{"spacing_before":"0px","spacing_after":"10.67px","text_indent":"0px","line_spacing":"17.27px"}},{"insert":"A","attributes":{"color":"#000000"}},{"insert":"\n","attributes":{"paragraph":true,"spacing_before":"0px","spacing_after":"10.67px","indent":0,"text_indent":"0px","line_spacing":"17.27px"}},{"insert":"\n"},{"delete":80},{"retain":1,"attributes":{"indent":1}},{"retain":4},{"retain":1,"attributes":{"paragraph":null,"indent":null}},{"insert":"A","attributes":{"color":"#000000"}},{"insert":"\n","attributes":{"paragraph":true,"spacing_before":"0px","spacing_after":"10.67px","indent":0,"text_indent":"0px","line_spacing":"17.27px"}}]}

我挖了一点，发现错误是由于在用于diff的增量上有“保留”操作引起的，并且它没有被处理。所以，我想知道是否有解决方案，因为我不确定我所做的代码是否是正确的方法（存储文档的差异）。

Answer 1

如果您不需要每个单独的操作，您只需更新text-change事件上的文档，如下所示：

quill.on('text-change', () => {
   // By the time we hit the 'text-change' event, 
   // quill.getContents() will return the updated
   // content of the document
   const currentOps = quill.getContents();
   updateDatabase(currentOps);
});

function updateDatabase(currentOps) {
  // Do whatever you need to do with the current ops 
  // to store them. No need at all to store the diffs.
}

Answer 2

所以，我发现了diff函数的问题。这是因为，当我初始化编辑器时，我使用函数updateContents将数据库中的delta设置为编辑器。 Quill总是用空行初始化编辑器。通过调用updateContents，它正在用来自我的数据库的文本组成空白行。然后，当用户更改文本时，编辑器中的增量与数据库中的增量不同。

为了解决这个问题，我将从数据库加载内容的函数更改为setContents。这样，编辑器和数据库的增量匹配。