Comment éditer un lien dans un contentEditable div

Question

Est-ce que quelqu'un a des suggestions sur la façon de modifier un lien dans un div contentEditable? Il serait idéal une fois que le lien soit cliqué avec la souris, ou que le curseur atteigne le lien, qu'une petite invite apparaisse et permette à l'utilisateur de changer la propriété href du lien. L'invite n'est pas le problème, mais comment est-il possible de détecter que le lien a été cliqué ou que le curseur est arrivé sur le lien? onfocus ne semble pas fonctionner dans un div contentEditable sur Firefox & Safari. Des idées?

Answer 1

Je suis assez sûr que c'est ce que vous cherchiez, mais j'ai utilisé jQuery juste pour rendre le concept un peu plus facile à se moquer. jsbin aperçu disponible, alors allez-y. Si quelqu'un est capable de convertir cela en JS pur pour le bien de la réponse, j'en ai fait un wiki communautaire. Il fonctionne en se liant aux événements keyup/click sur la div modifiable, puis en vérifiant le nœud auquel le curseur d'insertion des utilisateurs est placé en utilisant window.getSelection() pour les normes, ou document.selection pour ces personnes IE. Le reste du code gère la gestion des modifications.

méthodes 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()); 
    }); 
});