发现<br>使用window.getSelection在wysiwyg编辑器中定位

finding <br> position in wysiwyg editor with window.getSelection

本文关键字：wysiwyg 编辑器 getSelection 定位 使用 lt br gt 发现 window      更新时间：2023-11-19

我正在尝试开发一个wysiwyg editör。在editör中，我试图在onkeydown函数启动时找到"br"的位置。

<p><b>1234</b><br><br>678</p>

当我将光标定位在6附近时，得到678，并带有"oSelection.anchorNode.nodeValue"。当我在"br"附近找到cursot时，一无所获。

我想在光标附近找到前后标签？

更新2:与ismail交谈后，问题可以改为：如何查找，光标前后的元素是否为<br>标记。这可以这样实现：

var selection = window.getSelection(),
    isBRBeforeCursor = IsBRBeforeCursor(selection),
    isBRAfterCursor = IsBRAfterCursor(selection);
function GetPreviousSibling(node) {
    if (node.previousSibling != null) {
        return node.previousSibling;
    } else if (node.parentNode != null) {
        return GetPreviousSibling(node.parentNode);
    } else {
        return null;
    }
}
function GetNextSibling(node) {
    if (node.nextSibling != null) {
        return node.nextSibling;
    } else if (node.parentNode != null) {
        return GetNextSibling(node.parentNode);
    } else {
        return null;
    }
}
function IsBRBeforeCursor(selection) {
    if(selection.anchorNode.nodeName === '#text') {
        if(selection.anchorOffset > 0) {
            // There is text before the cursor
            return false;
        } else {
            var previousSibling = GetPreviousSibling(selection.anchorNode);
            return previousSibling !== null && previousSibling.nodeName === 'BR';
        }
    } else {
        if(selection.anchorOffset > 0) {
            return selection.anchorNode.childNodes[selection.anchorOffset - 1].nodeName === 'BR';
        } else {
            var previousSibling = GetPreviousSibling(selection.anchorNode);
            return previousSibling !== null && previousSibling.nodeName === 'BR';
        }
    }
}
function IsBRAfterCursor(selection) {
    if(selection.anchorNode.nodeName === '#text') {
        if(selection.anchorOffset < selection.anchorNode.nodeValue.length) {
            // There is text after the cursor
            return false;
        } else {
            var nextSibling = GetNextSibling(selection.anchorNode);
            return nextSibling !== null && nextSibling.nodeName === 'BR';
        }
    } else {
        if(selection.anchorNode.childNodes.length > selection.anchorOffset) {
            return selection.anchorNode.childNodes[selection.anchorOffset].nodeName === 'BR';
        } else {
            var nextSibling = GetNextSibling(selection.anchorNode);
            return nextSibling !== null && nextSibling.nodeName === 'BR';
        }
    }
}

更新：我认为总是找到正确的上一个/下一个元素有点棘手，因为文本本身就是一个节点。因此，为了获得上一个/下一个元素，有时在向左和向右看之前，你需要提高一个级别。看看下面的例子：

<p><b>123</b><br><u><i><br>456</i></u><br></p>

  1. 光标位于1和2之间。

    下一个元素是<br>，它向上一级，然后向右。

  2. 光标位于4和5之间。

    前面的元素是<br>，它就在左边一个。下一个元素是<br>，它向上两级，然后向右。

如果是这种情况，你可以找到上一个/下一个元素，如下所示：

function getElementBeforeSelection() {
    var anchor = window.getSelection().anchorNode;
    while(anchor.previousSibling === null && anchor.nodeName != 'BODY') {
        anchor = anchor.parentNode;
    }
    return anchor.previousSibling;
}

原始答案：您可以使用parentNode、previousSibling和nextSibling找到周围的元素。因此，光标前后的标签是：

var anchorNode = window.getSelection().anchorNode,
    before = anchorNode.previousSibling,
    after = anchorNode.nextSibling;
相关文章：