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

如何解决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()

将返回the9ѭ元素。如果那是您想要的，则可以使用Range通过检查

commonAncestorContainer

的nodeType来实现：

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