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

Question

我正在寻找一种适用于跨浏览器(即 IE、Firefox 和 Safari)的解决方案。

Answer 1

我假设“可编辑内容窗口”是指打开了 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;
        }   
    }
}