javascript/所见即所得parentElement返回div而不是p元素

Question

我正在尝试使用 contentEditable=true 使用 javascript 构建一个所见即所得编辑器。我遇到的问题是，在 IE 上 document.selection.createRange().parentElement() 返回 contenteditable 设置为 true 的元素。为了更容易理解，我给你举一个例子：

<div contenteditable="true">
   <p>lorem ip|sum dolor</p>
</div>

在这个例子中' | ' 代表插入符号。在 chrome 中，当我使用 commonAncestorContainer 时，本例中返回的元素是 p，而在 IE 中，parentElement 返回容器 div。根据我的理解，浏览器会忽略这些元素，因此我无法弄清楚哪个元素是焦点。我不会问“是否有什么办法”，因为我已经看到了非常好的所见即所得编辑器，因此我的问题是如何在这个示例中获得“真正的”父元素？ :)

顺便说一句，因为我是新用户，所以我无法创建标签。我相信“parentElement”对于这个问题来说是一个很好的标签。

Answer 1

DOM Range 的 commonAncestorContainer 和 TextRange 的 parentElement() 略有不同：commonAncestorContainer code> 返回包含整个范围的最深节点（可以是文本节点），而 parentElement() 返回包含整个 TextRange 的最深元素。在您的示例中，commonAncestorContainer 将是文本节点“lorem ipsum dolor”，而 parentElement() 将返回

元素。如果这就是您想要的，您可以通过检查commonAncestorContainer的nodeType来使用Range获得它：

var containerElement = range.commonAncestorContainer;
if (containerElement.nodeType == 3) {
    containerElement = containerElement.parentNode;
}