contenteditable没有检测图像

时间:2017-06-26 14:56:59

标签: javascript jquery wysiwyg contenteditable

请帮帮我..

我有令人满意的问题,特别是在图像检测方面

我使用此代码:

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 :请帮助我,找到方法

提前谢谢

1 个答案:

答案 0 :(得分:1)

我认为解决问题的最简单方法是使用您自己的getnode函数,但允许该元素通过目标属性来自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();
    }
});