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

Question

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

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

10

javascript html contenteditable

задан Travis D 17 March 2010 в 00:35

1 ответ

Другие вопросы по тегам:

javascript html contenteditable

Похожие вопросы:

score 16 · Accepted Answer

Я уверен, что это то, что вы искали, однако я использовал 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());
    });
});