Javascript: Wykryj węzeł rodzica opiekuna

Question

Buduję prosty edytor WYSIWYG wewnątrz elementu iframe z włączonym trybem projektowania, obecnie mogę zaznaczać wybrany tekst pogrubieniem, kursywą i podkreśleniem, a także linkować i działają poprawnie.

Ale chciałbym wiedzieć, kiedy caret jest wewnątrz b, i, u, a, znaczniki, więc mogę poinformować użytkownika, że ​​obecny wybór jest pogrubienie lub cokolwiek .

Przykłady:

Hello <b>Stackover|flow</b> is cool! = Jesteś Wewnątrz b tagu

<i>Be|st place</i>! = Jesteś Wewnątrz i tagu

Hello <a href="http://stackoverflow.com/">Go|od stuff!</a> = Jesteś Wewnątrz a tag

Brak bibliotek zadowolić Chciałbym nauczyć się tej rzeczy :)

Answer 1

MSIE LTE 8: TextRange.parentElement()

Inne: DOMRange.commonAncestorContainer

<script type="text/javascript"> 
<!-- 
function fx() 
{ 

    var target=null; 
    if(window.getSelection) 
    { 
    target=window.getSelection().getRangeAt(0).commonAncestorContainer; 
    return((target.nodeType===1)?target:target.parentNode); 
    } 
    else if(document.selection) 
    { 
    var target=document.selection.createRange().parentElement(); 
    } 
    return target; 
} 
//--> 
</script> 
<input type="button" onclick="alert(fx().tagName)" value="click"> 
<div id="editor" contenteditable="true"> 
Hello <b>Stackoverflow</b> is cool! <i>Best place</i> 
Hello <a href="http://stackoverflow.com/">Good stuff!</a> 
</div>