Как отредактировать ссылку в contentEditable div

Question

Есть ли у кого-нибудь предложения по редактированию ссылки в contentEditable div? Это было бы идеально, если ссылка будет либо нажата мышью, либо курсор попадет по ссылке, что появится небольшое приглашение и позволит пользователю изменить свойство href ссылки. Запрос не является проблемой, но как можно обнаружить, что ссылка была нажата или что курсор достиг ссылки? onfocus, похоже, не работает в contentEditable div на Firefox & Safari. Есть идеи?

Answer 1

Я уверен, что это то, что вы искали, однако я использовал jQuery, чтобы сделать концепцию немного легче издеваться. jsbin Предварительный просмотр доступен, поэтому посмотрите на него. Если кто-то может преобразовать это в чистый JS ради ответа, я сделал его вики-сообществом.

Он работает путем привязки к событиям keyup/click на редактируемом div, а затем проверяет наличие узла, который размещается пользователем, с использованием window.getSelection() для стандартов или document.selection для этих пользователей IE. Остальная часть кода обрабатывает или редактирует изменения.

методы 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()); 
    }); 
});