javascript - javascript/WYSIWYG parentElement返回div而不是p元素

我正在尝试使用contentEditable = true使用javascript构建WYSIWYG编辑器。我遇到的问题是在IE document.selection.createRange（）。parentElement（）返回的情况下，contenteditable设置为true。为了更容易理解，我举一个例子：

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

在此示例中，“ |代表插入符号。在Chrome中，当我使用commonAncestorContainer时，在此示例中，返回元素为p，而在IE中，parentElement返回容器div。以我的理解，浏览器忽略了这些元素，因此我无法弄清焦点是什么元素。我不会问“是否有办法”，因为我看到了相当不错的所见即所得编辑器，因此，我的问题是如何在此示例中获得“真实的”父元素？ :)

顺便说一句，由于我是新用户，因此无法创建标签。我相信“ parentElement”将是解决此问题的好方法。

最佳答案

DOM Range的commonAncestorContainer和TextRange的parentElement()略有不同：commonAncestorContainer返回包含整个范围的最深节点（可能是文本节点），而parentElement()返回最深元素包含整个TextRange。在您的示例中，commonAncestorContainer将是文本节点“ lorem ipsum dolor”，而parentElement()将返回<p>元素。如果这是您想要的，则可以使用Range通过检查commonAncestorContainer的nodeType来实现：

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