Angularjs 当使用angular js调用contenteditable div上的更改事件时，光标（插入符号）移动到开始位置

触发更改事件时，光标移动到开头，而不是设置为最后一个类型位置。我正在使用angular js使用内容可编辑div

普朗克

---

为什么光标位置移动到起始位置？

我假设Angular正在重写可编辑元素的

innerHTML

属性，从而破坏并重新创建其中的所有DOM树，从而导致插入符号重置到起始位置。有关潜在解决方案，请参见以下答案：

---

我知道这是一个老问题，但由于我一整天都在寻找这个问题的解决方案，我想将这个解决方案分享给那些可能仍在寻找有效答案的人：

var el, el2, range, sel;

el = element[0];
range = document.createRange();
sel = window.getSelection();
if (el.childNodes.length > 0) {
el2 = el.childNodes[el.childNodes.length - 1];
range.setStartAfter(el2);
} else {
range.setStartAfter(el);
}
range.collapse(true);
sel.removeAllRanges();
sel.addRange(range);

我从指令“MoveCareToEndochange”方法中获得了这段代码。

---

这对我很有用。

在我的例子中，我使用与DOM（双向绑定）相同的数组引用来更改innerHTML。因此，dom被重新渲染，因此光标移到了开头

解决方案是使用JSON.parse（JSON.stringify（a））制作数组的深度副本；其中a是存储内容可编辑的单词然后进行更改的数组

let filetext=JSON.parse（JSON.stringify（this.filetext））；
//更新当前文本
FileText[alternativesIndex].Alternatives[0].Words[wordIndex].Word=html；
let data={Text:JSON.stringify（filetext）}；
this.fileService.changeFileText（数据，this.file.fileId）.subscribe（res=>{
});