javascript - 在 contenteditable 中保留光标位置

Question

我正在尝试使用 contenteditable 创建一个富文本区域。突出显示的解析器返回一个 html 字符串，我用它替换元素的内容(可能无效，现在必须这样)。

contenteditable 的问题是在这样的事情之后光标位置没有保留，我可以理解。

有没有办法保留这个位置？如果这有助于解决问题，我可以让解析器返回一个元素，该元素表示插入符号应该位于何处(给定光标在文本中的偏移量)。

提前致谢。

Answer 1

I could make the parser return a element representing where the caret should be

那就够了。假设您解析生成的 HTML，现在您在 sentinel 中有一个插入符号应该在这里元素的引用。 .

使用 document.createRange()创建一个 DOM 范围。让here成为新的范围。调用 here.selectNode(sentinel) 让范围包围元素。

调用 here.deleteContents() 删除虚拟元素。

调用window.getSelection().removeAllRanges()清除当前选择，它已被 HTML 更改搞乱。

调用window.getSelection().addRange(here)将光标放在元素原来所在的位置。

---

is sentinel my anchor element?

是的，我想。

---

How do I fetch the cursor position in the string? ... I want the offset from the start of the string.

让我们从光标位置开始。窗口选择的第零个范围应该是光标的位置。也就是说，范围的起点和终点在同一位置，即光标处。但是，这些位置的表达方式适合 DOM 树，而不是字符串和偏移量。它们有一个 (start|end)Container 和一个 (start|end)Offset。检查 DOM 规范以了解这些含义。

您对某种字符串偏移感兴趣。按照我的解释，这就像，如果你采用纯文本版本的子树，那么哪个索引对应于范围？有多种方法可以定义子树的明文版本。一是什么textContent属性(property)返回，其中 foo<br>bar给出“foobar”。一些浏览器定义 innerText , 其中foo<br>bar给出“foor\nbar”。您可能已经选择了将要使用的那个，但问题中没有说明。

无论如何，这是一个想法，但它可能不适合您的应用。

将窗口选择设置为从开始(索引 0 应位于的位置)到光标位置的单个范围。

阅读 window.getSelection().toString().length .在我开发的浏览器中，toString在选择对象上给出的结果与 innerText 相当.