So bearbeiten Sie einen Link in einem contentEditable div

Question

Hat jemand Vorschläge zum Bearbeiten eines Links in einem contentEditable div? Es wäre ideal, wenn der Link entweder mit der Maus angeklickt wird oder der Cursor auf den Link klickt, dass eine kleine Eingabeaufforderung angezeigt wird und der Benutzer die href-Eigenschaft des Links ändern kann. Die Eingabeaufforderung ist nicht das Problem, aber wie ist es möglich zu erkennen, dass der Link entweder angeklickt wurde oder dass der Cursor den Link erreicht hat? onfocus scheint nicht in einem contentEditable div auf Firefox & Safari zu arbeiten. Irgendwelche Ideen?

Answer 1

Ich bin mir ziemlich sicher, dass das ist, was Sie gesucht haben, jedoch habe ich jQuery verwendet, nur um das Konzept ein wenig einfacher zu machen, zu verspotten. jsbin Vorschau verfügbar, also schau es dir an. Wenn jemand dies für die Antwort in reines JS konvertieren kann, habe ich es zu einem Community-Wiki gemacht.

Es funktioniert durch Bindung an die keyup/click -Ereignisse auf dem bearbeitbaren div, dann auf den Knoten, den der Benutzer Caret bei Verwendung window.getSelection() für die Standards oder document.selection für diese IE Personen platziert. Der Rest des Codes behandelt die Bearbeitung.

jQuery Methoden:

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