Как получить элемент изображения после вставки с помощью execCommand?

Question

Есть ли способ получить элемент изображения после того, как мы вставим изображение с помощью execCommand? например

e.execCommand('insertimage',0,'ronaldo.png')

Answer 1

Не использовать insertimage, используйте старый добрый insertHTML и дайте элемент, который вы вставляете ID, чтобы вы могли ссылаться на него позже. т.е.

function insertHTML(img) {
  var id = "rand" + Math.random();
  var doc = document.getElementById("editor");
  doc = doc.document ? doc.document : doc.contentWindow.document;
  img = "<img src='" + img + "' id=" + id + ">";

  if(document.all) {
    var range = doc.selection.createRange();
    range.pasteHTML(img);
    range.collapse(false);
    range.select();
  } else {
    doc.execCommand("insertHTML", false, img);
  }
  return doc.getElementById(id);
};

Answer 2

Вы можете использовать тот факт, что браузеры размещают каретку сразу после вставленного изображения и возвращаются оттуда. Следующее требует поддержки DOM Range и selection, что исключает IE <= 8, но если это важно, вы можете использовать библиотеку, такую ​​как мой собственный Rangy, чтобы заполнить этот пробел.

Демо: http://jsfiddle.net/xJkuj/

Код:

function previousNode(node) {
    var previous = node.previousSibling;
    if (previous) {
        node = previous;
        while (node.hasChildNodes()) {
            node = node.lastChild;
        }
        return node;
    }
    var parent = node.parentNode;
    if (parent && parent.nodeType.hasChildNodes()) {
        return parent;
    }
    return null;
}

document.execCommand("InsertImage", false, "http://placekitten.com/200/300");

// Get the current selection
var sel = window.getSelection();
if (sel.rangeCount > 0) {
    var range = sel.getRangeAt(0);
    var node = range.startContainer;
    if (node.hasChildNodes() && range.startOffset > 0) {
        node = node.childNodes[range.startOffset - 1];
    }

    // Walk backwards through the DOM until we find an image
    while (node) {
        if (node.nodeType == 1 && node.tagName.toLowerCase()  == "img") {
            alert("Found inserted image with src " + node.src);
            break;
        }
        node = previousNode(node);
    }
}

Answer 3

Это мой путь:

e.execCommand('insertimage', 0, URI) // image's URI
image=$('img[src="'+URI+'"]').not('.handled').addClass('.handled');

//.not('.handled').addClass('.handled') is needed if there are many images with the same URI