contenteditable 无检测图像答案

【问题标题】：contenteditable no detection imagecontenteditable 无检测图像
【发布时间】：2017-06-26 14:56:59
【问题描述】：

请帮帮我..

我有内容可编辑的问题，尤其是在图像检测方面

我使用这个代码：

function getnode() {
  var node, selection;
  if (window.getSelection) {
    selection = getSelection();
    node = selection.anchorNode;
  }
  if (!node && document.selection) {
    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);
  }
}

jquery：

$(function() {
  $("#editor").bind('click', function(e) {
    var $node = $(getnode());

    if ($node.is('a')) {
      alert("Yes I am link");
    }

    if ($node.is('b')) {
      alert("Yes I am bold");
    }

    if ($node.is('img')) {
      alert("IMAGE READY");
    } else {
      $("#editor").focus();
    }
  });
});

FIDDLE DEMO：请帮帮我，找到路

提前谢谢你

【问题讨论】：

有什么理由不使用e.target？
您的问题究竟是什么？我刚试过你的小提琴，它似乎运行良好。
@gus27 添加图片并点击它是图片后没有通知，所以可能是getnode()函数的错误，没有返回正确的节点
@Icepickle E.target 我在替换代码中使用了警报，例如将数据作为输入区域的链接我忘了删除它，抱歉

标签： javascript jquery wysiwyg contenteditable

【解决方案1】：

我认为解决您的问题的最简单方法是不使用您自己的 getnode 函数，而是通过 target 属性允许元素来自 click 事件处理程序。

至少对于我尝试过的场景而言，将代码更改为此非常有效

$("#editor").bind('click', function (e) {
    var $node =  $( e.target );
    if ($node.is('a')) {
        alert("Yes I am link");
    }
    if ($node.is('b')) {
        alert("Yes I am bold");
    }
    if ($node.is('img')) {alert("IMAGE READY");
    } else {
        $("#editor").focus();
    }
});

【讨论】：

感谢@Icepickle 这是我的演示FIDDLE