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。根据我的理解，浏览器忽略了元素，因此我无法弄清楚焦点是什么元素。我不会问“是否有任何办法”，因为我见过相当不错的工作所见即所得的编辑器，因此我的问题是如何在这个例子中得到“真正的”父元素？：）

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

Answer 1

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

<p>

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

1 个答案: