获取包含HTML内容的contentEditable区域中的插入符（光标）位置

Question

我有contentEditable元素（可以是p，div，...），我想在其中获得插入符号（光标）的位置。我通常可以通过以下代码来实现：

var position = window.getSelection().getRangeAt(0).startOffset;

当元素仅包含文本时，这可以正常工作。但是，当元素包含某些HTML格式时，返回的位置将相对于所包含HTML元素内的插入符号位置。

假设contentEditable元素的内容是这样的：

AB<b>CD</b>EF

如果插入符在inside <b></b>，比如说在C和D之间，则上面代码返回的位置是1而不是3（从contentEditable元素内容的开头算起）

有人可以提出解决方案吗？

Answer 1

这是一篇非常古老的文章，但仍然是在Google上搜索的第一批结果之一，因此也许仍然有用。考虑到html标记和换行符，这对我来说也能找到正确的位置（在Firefox上测试）：function getCaretPosition (node) {&nbsp; &nbsp; var range = window.getSelection().getRangeAt(0),&nbsp; &nbsp; &nbsp; &nbsp; preCaretRange = range.cloneRange(),&nbsp; &nbsp; &nbsp; &nbsp; caretPosition,&nbsp; &nbsp; &nbsp; &nbsp; tmp = document.createElement("div");&nbsp; &nbsp; preCaretRange.selectNodeContents(node);&nbsp; &nbsp; preCaretRange.setEnd(range.endContainer, range.endOffset);&nbsp; &nbsp; tmp.appendChild(preCaretRange.cloneContents());&nbsp; &nbsp; caretPosition = tmp.innerHTML.length;&nbsp; &nbsp; return caretPosition;}它使用cloneContents功能来获取实际的html，并将documentfragment附加到临时div上以获取html的长度。