如何编辑contentEditable div中的链接

Question

有没有人对如何编辑contentEditable div中的链接有任何建议？一旦用鼠标点击链接或光标点击链接,这将是理想的,弹出一个小提示并允许用户更改链接的href属性.提示不是问题,但是如何检测链接是单击还是光标已到达链接？onfocus似乎不适用于Firefox和Safari上的contentEditable div.有任何想法吗？

Answer 1

我很确定这是你想要的,但是我使用jQuery只是为了让这个概念更容易模拟. jsbin预览可用,所以去看看吧.如果有人能够为了答案而将其转换为纯JS,那么我已经将它变成了社区维基.

它的工作原理是绑定到可编辑div上的keyup/click事件,然后检查用户插入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());
    });
});