如何在浏览器中查找光标处的DOM节点'；使用Javascript的可编辑内容窗口？

我正在寻找一种跨浏览器的解决方案，即Firefox和Safari。

通过“可编辑内容窗口”，我假设您指的是打开了

contenteditable

的元素，或者打开了

designMode

的文档

还有两种情况需要考虑：用户进行选择的情况和只有插入符号的情况。下面的代码在这两种情况下都适用，并将为您提供最内部的元素，该元素完全包含所选内容。如果选择完全包含在一个文本节点中，那么在IE中获取该文本节点有点复杂（在其他浏览器中很简单），所以我没有在这里提供该代码。如果你需要，我可以把它挖出来

function getSelectionContainerElement() {
    var range, sel, container;
    if (document.selection && document.selection.createRange) {
        // IE case
        range = document.selection.createRange();
        return range.parentElement();
    } else if (window.getSelection) {
        sel = window.getSelection();
        if (sel.getRangeAt) {
            if (sel.rangeCount > 0) {
                range = sel.getRangeAt(0);
            }
        } else {
            // Old WebKit selection object has no getRangeAt, so
            // create a range from other selection properties
            range = document.createRange();
            range.setStart(sel.anchorNode, sel.anchorOffset);
            range.setEnd(sel.focusNode, sel.focusOffset);

            // Handle the case when the selection was selected backwards (from the end to the start in the document)
            if (range.collapsed !== sel.isCollapsed) {
                range.setStart(sel.focusNode, sel.focusOffset);
                range.setEnd(sel.anchorNode, sel.anchorOffset);
            }
        }

        if (range) {
           container = range.commonAncestorContainer;

           // Check if the container is a text node and return its parent if so
           return container.nodeType === 3 ? container.parentNode : container;
        }   
    }
}

您也可以使用该库：

---

蒂姆，这正是我想要的。如果您也能深入了解IE的情况，即选择包含在文本节点中，我将不胜感激。谢谢。顺便说一句，IE中返回range.parentElement（）的情况似乎总是返回body元素，即使插入符号在锚节点内的文本中，例如，在这个HTML stackoverflow.com“>xyz中，如果插入符号介于“x”和“y”之间，那么parentElement（）不应该返回body元素吗返回“a”节点？是的，它应该返回。我以前在

parentElement（）

方面没有遇到过问题-你有没有我可以查看的页面来显示问题？IE代码非常复杂。我在IERange（）中使用了我自己的算法优化。在IE中仍然对我有效。你能发布一个例子来说明你的问题吗？

elementAtCursor = rangy.getSelection().anchorNode.parentNode