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

Question

我开始使用Quill，我需要将用户所做的更改保存在文档中，如果可能的话，将它们组合起来，所以我不需要逐个操作地存储。

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

为了获取以前的文档状态，最初我使用原始文档增量。然后，当存储差异时，我只需将原始文档增量与数据库中存在的差异组合起来。例如：

原始文档增量：{"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用的deltas有一个"retain"操作，没有处理。所以，我想知道是否有解决方案，因为我不确定我编写的代码是否是执行此操作的正确方法（存储文档的差异）。

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

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

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

How can I store composed changes using Quill?

javascript

quill