Question

我尝试在对Quill进行编辑时向Quill的delta添加一个新句子，同时保留用户光标的位置。进行编辑时，我从quill.getSelection().index检索光标索引，然后在使用quill.setContents()应用新增量后，尝试使用{{1}将光标索引设置回其前一个位置}}。这会导致Quill抛出一个＆＃34; 文档中的给定范围＆＃34;错误。甚至在触摸编辑器更改事件内的delta之前尝试使用quill.setSelection()也不起作用（没有任何反应）。为什么quill.setSelection()没有按预期工作？

这是一个展示我的问题的JSFiddle：https://jsfiddle.net/nadavrt/gaLareyw/15/

尝试编辑Quill编辑器文本以查看问题。您可以将setSelection设置为withInsert，以查看false即使没有插入也无法正常工作。

Answer 1

在对Quill进行编辑时，我尝试在Quill的增量中插入一个新句子，同时保留用户光标的位置。

我建议使用quill.updateContents()并构建新的Delta，而不是使用quill.getContents()和quill.setContents()。

quill.updateContents(new Delta()
  .retain(quill.getSelection().index)
  .insert('A new sentence has appeared.')
);

Answer 2

实际上，在第一种情况下（在编辑器的末尾插入一个句子），您无需以编程方式更改选择，只需使用Quill的insertText方法即可：

quill.insertText(quill.getLength(), "A new sentence has appeared.")

JSFiddle：https://jsfiddle.net/jaimies/r4ksnma8/29/

第二种情况（用户键入时更改光标位置）比较棘手。我发现，在用户键入字符后，无法使用Quill更改选择。解决方法是将setSelection调用包装到setTimeout中，超时为0：

setTimeout(() => quill.setSelection(quill.getSelection().index + 10, 0), 0)

之所以可行，是因为setTimeout内部的代码即使超时实际上为0也不会立即执行。顺便说一句，您也可以省略setTimeout的最后一个参数默认设置为0

此解决方案并不完美，并且光标有时可能会闪烁，但这是迄今为止我发现的解决此问题的唯一方法。

JSFiddle：https://jsfiddle.net/jaimies/9h3uqktL/3/

在Quill中设置新增量后设置光标位置

2 个答案: