Javascript: Detect Carets Parent Node

Question

Estoy construyendo un editor WYSIWYG simple dentro de un iframe con designMode, actualmente puedo hacer que el texto seleccionado sea negrita, cursiva y subrayado y para vincular, y funcionan bien.

Pero me gustaría saber cuando el caret está dentro de la b, i, u, a, etiquetas, para que pueda notificar al usuario que la selección actual está en negrita o lo que sea .

Ejemplos:

Hello <b>Stackover|flow</b> is cool! = Estás dentro de la etiqueta b

<i>Be|st place</i>! = Estás dentro de la etiqueta i

Hello <a href="http://stackoverflow.com/">Go|od stuff!</a> = Estás dentro de la a etiqueta

No hay bibliotecas por favor, me gustaría aprender estas cosas :)

Answer 1

MSIE LTE 8: TextRange.parentElement()

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