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

Question

我正在尝试使用 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。据我了解，浏览器忽略了这些元素，因此我无法弄清楚重点是什么元素。我不会问“是否有任何办法”，因为我已经看到非常好的 WYSIWYG 编辑器，因此我的问题是如何在这个例子中获得“真正的”父元素？ :)

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

Answer 1

DOM Range的 commonAncestorContainer和 TextRange的 parentElement()略有不同:commonAncestorContainer返回包含整个范围的最深节点(可能是文本节点)，而 parentElement()返回包含整个 TextRange 的最深的元素。在您的示例中，commonAncestorContainer将是文本节点“lorem ipsum dolor”，而 parentElement()会返回 <p>元素。如果那是你想要的，你可以通过检查 commonAncestorContainer 来获得它。的节点类型:

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