找到<br>位置在wysiwyg編輯器window.getSelection

Question

我想開發一個wysiwygeditör。 在editör中，我試圖在onkeydown函數觸發時找到「br」的位置。

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

當我找到光標靠近6獲得678與「oSelection.anchorNode.nodeValue」。 當我找到「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. 光標是1和2

   之間

   下一個元素是<br>，這是一個級別，然後到右側。

2. 光標是4和5

   之間PREVIOUS元素<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;