如何编辑contentEditable div中的链接 [英] How to edit a link within a contentEditable div

问题描述

有没有人有关于如何编辑contentEditable div中的链接的建议？一旦链接被鼠标点击或者光标碰到链接，这将是理想的，一个小提示会弹出并允许用户改变链接的href属性。提示不是问题，但是如何检测链接是否已被点击或者光标是否已经到达链接？ onfocus似乎不适用于Firefox&苹果浏览器。任何想法？

Does anyone have any suggestions on how to edit an link in a contentEditable div? It would be ideal once the link is either clicked with mouse, or the cursor hits the link, that the a small prompt would pop up and allow the user to change the href property of the link. The prompt isn't the issue, but how is it possible to detect the link has been either clicked or that the cursor has arrived at the link? onfocus doesn't seem to work in a contentEditable div on Firefox & Safari. Any ideas?

推荐答案

我非常确定这是你正在寻找的，但我用jQuery只是为了使概念更容易嘲笑。 jsbin 预览可用，所以请看看它。如果任何人能够将其转换为纯JS以求答案，我已将其制作为社区维基。

I'm pretty sure this is what you were looking for, however I used jQuery just to make the concept a little easier to mock. jsbin preview available, so go look at it. If anyone is able to convert this to pure JS for the sake of the answer, I have made it a community wiki.

它通过绑定到键控/点击事件在可编辑div上，然后使用 window.getSelection（）标准或文档检查用户插入的节点。为那些IE人员选择。其余的代码处理弹出/处理编辑。

It works by binding to the keyup/click events on the editable div, then checking for the node that the users caret is being placed at using window.getSelection() for the Standards, or document.selection for those IE people. The rest of the code handles popping/handling the edits.

jQuery方法：

jQuery methods:

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

这篇关于如何编辑contentEditable div中的链接的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！