Cómo editar un enlace dentro de un contentEditable div

Question

¿Alguien tiene alguna sugerencia sobre cómo editar un enlace en un contentEditable div? Sería ideal que, una vez que se hace clic con el mouse en el enlace, o que el cursor toca el enlace, que aparezca un pequeño mensaje emergente y que el usuario pueda cambiar la propiedad href del enlace. El mensaje no es el problema, pero ¿cómo es posible detectar que se ha hecho clic en el enlace o que el cursor ha llegado al enlace? onfocus no parece funcionar en un div de contentEditable en Firefox & Safari. ¿Algunas ideas?

Answer 1

Estoy bastante seguro de que esto es lo que estaba buscando, sin embargo, utilicé jQuery solo para hacer que el concepto sea un poco más fácil de burlar. jsbin vista previa disponible, así que ve a verlo. Si alguien puede convertir esto en JS puro por el bien de la respuesta, lo he convertido en una wiki comunitaria.

Funciona enlazando los eventos keyup/click en el divisor editable, luego verificando el nodo que los usuarios usan en window.getSelection() para los estándares, o document.selection para los IE. El resto del código maneja el estallido/manejo de las ediciones.

métodos jQuery:

function getSelectionStartNode(){ 
    var node,selection; 
    if (window.getSelection) { // FF3.6, Safari4, Chrome5 (DOM Standards) 
    selection = getSelection(); 
    node = selection.anchorNode; 
    } 
    if (!node && document.selection) { // IE 
    selection = document.selection 
    var range = selection.getRangeAt ? selection.getRangeAt(0) : selection.createRange(); 
    node = range.commonAncestorContainer ? range.commonAncestorContainer : 
      range.parentElement ? range.parentElement() : range.item(0); 
    } 
    if (node) { 
    return (node.nodeName == "#text" ? node.parentNode : node); 
    } 
} 

$(function() { 
    $("#editLink").hide(); 
    $("#myEditable").bind('keyup click', function(e) { 
     var $node = $(getSelectionStartNode()); 
     if ($node.is('a')) { 
      $("#editLink").css({ 
      top: $node.offset().top - $('#editLink').height() - 5, 
      left: $node.offset().left 
      }).show().data('node', $node); 
      $("#linktext").val($node.text()); 
      $("#linkhref").val($node.attr('href')); 
      $("#linkpreview").attr('href', $node.attr('href')); 
     } else { 
      $("#editLink").hide(); 
     } 
    }); 
    $("#linktext").bind('keyup change', function() { 
     var $node = $("#editLink").data('node'); 
     $node.text($(this).val()); 
    }); 
    $("#linkhref").bind('keyup change', function() { 
     var $node = $("#editLink").data('node'); 
     $node.attr('href', $(this).val()); 
     $node.and('#linkpreview').attr('href',$(this).val()); 
    }); 
});