Javascript 在纬管中设置新三角形后设置光标位置

我试图在对羽毛笔进行编辑时，在羽毛笔的三角形中插入一个新句子，同时保留用户光标的位置。进行编辑时，我从

quill.getSelection（）.index

检索光标索引，然后在使用

quill.setContents（）

应用新增量后，我尝试使用

quill.setSelection（）

将光标索引设置回其以前的位置。这会导致Quill抛出“给定范围不在文档中”错误。即使在触碰编辑器更改事件中的增量之前尝试使用

quill.setSelection（）

，也不会起作用（不会发生任何情况）。为什么

setSelection

不能按预期工作

下面是一个JSFIDLE，展示了我的问题：

尝试编辑羽毛笔编辑器文本以查看问题。您可以将

withInsert

设置为

false

，以查看

setSelection

即使没有insert也无法工作

我试图在对羽毛笔进行编辑时，在羽毛笔的三角形中插入一个新句子，同时保留用户光标的位置

我建议使用

quill.updateContents（）

并构造一个新的增量，而不是使用

quill.getContents（）

和

quill.setContents（）

---

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

insertText

方法：

quill.insertText（quill.getLength（），“出现了一个新句子。”）

JSFiddle：

然而，第二种情况（当用户键入时更改光标位置）更为棘手。我发现，在用户键入字符后立即更改选择是不可能的。解决方法是将

setSelection

调用包装成一个超时为0的

setTimeout

：

setTimeout（（）=>quill.setSelection（quill.getSelection（）.index+10,0），0）

这样做的原因是

setTimeout

中的代码不会立即执行，即使超时实际上为0。顺便说一句，您也可以省略

setTimeout

的最后一个参数，因为它默认设置为0

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

---

JSFiddle:

您的示例是从Quill文档中逐字提取的。我的代码中没有Delta类，也不知道它来自何处。您能调整您的示例以使用我的JSFIDLE吗？这个答案重点解释了在羽毛笔中设置新的增量后设置光标位置。非常感谢。诀窍是

.retain

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