如何編輯contentEditable div中的鏈接

Question

有沒有人有關於如何編輯contentEditable div中的鏈接的建議？一旦鏈接被鼠標點擊或者光標碰到鏈接，這將是理想的，一個小提示會彈出並允許用戶改變鏈接的href屬性。提示不是問題，但是如何檢測鏈接是否已被點擊或者光標是否已經到達鏈接？ onfocus似乎不適用於Safari & Safari的contentEditable div。有任何想法嗎？

Answer 1

我很確定這是你正在尋找的，但我用jQuery只是爲了讓這個概念更容易模擬。 jsbin預覽可用，所以去看看它。如果任何人能夠爲了答案而將其轉換爲純JS，我已經將其製作成社區維基。

它通過綁定到可編輯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()); 
    }); 
});