Question

我开始使用Quill，我需要将用户所做的更改保存在文档中，并且如果可能的话，将它们组成，因此不需要逐个存储操作。

为此，我正在监视“文本更改”事件，并且每个操作都存储在应用程序的数据库中。有时（每分钟），我用先前的文档状态来组合在文档中所做的更改，并在此合成结果和先前的文档状态之间执行diff，存储该diff的结果，并删除先前的操作，因为它们在差异结果中。

要获取先前的文档状态，最初我使用原始文档增量。然后，当差异存储时，我只是将原始文档增量与数据库中存在的差异组成。例如：

原始文档增量：{"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"}}]}

我进行了一点挖掘，发现错误是由于对用于差异的增量进行了“保留”操作引起的，因此未进行处理。因此，我想知道是否有解决方案，因为我不确定我编写的代码是否是执行此操作的正确方法（存储文档的差异）。

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来将数据库中的增量设置为编辑器。鹅毛笔总是用空白行初始化编辑器。通过调用updateContents，它将空白行与来自数据库的文本一起组成。然后，当用户更改文本时，来自编辑器的增量与数据库中的增量不同。

要解决此问题，我将将内容从数据库加载到的功能更改为setContents。这样，来自编辑器和数据库的增量就匹配了。

如何使用Quill存储组成的更改？

2 个答案: