问题描述
||
我正在尝试使用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;
}