Question

我正在努力开发一个所见即所得的编辑器。在editör中，我试图在onkeydown函数触发时找到“br”的位置。

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

当我使用“oSelection.anchorNode.nodeValue”将光标定位在6附近时获得678。当我找到“br”附近的cursot什么都没有。

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

Answer 1

更新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和2之间。

下一个元素是<br>，它是一个级别，然后是右侧。
光标位于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;

使用window.getSelection在wysiwyg编辑器中找到位置

1 个答案: