Javascript: Rileva il nodello principale di Caret

Question

Sto costruendo un semplice editor WYSIWYG all'interno di un iframe con designMode attivo, attualmente posso rendere grassetto, corsivo e sottolineato il testo selezionato e collegarlo, e funzionano bene.

Ma mi piacerebbe sapere quando il caret è all'interno del b, i, u, a, tag, in modo da poter notificare all'utente che la selezione corrente è in grassetto o qualsiasi altra cosa .

Esempi:

Hello <b>Stackover|flow</b> is cool! = Sei all'interno della b tag

<i>Be|st place</i>! = Sei all'interno della i tag

Hello <a href="http://stackoverflow.com/">Go|od stuff!</a> = Sei all'interno della a tag

Nessun librerie piacimento vorrei imparare questa roba :)

Answer 1

MSIE LTE 8: TextRange.parentElement()

Altri: 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>