How to get the image element after insert using execCommand?

问题

Is there any way to get the image element after we insert the image using execCommand? for example

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

回答1:

Don't use insertimage, use plain old insertHTML and give the element you are inserting an ID so that you can reference it later. i.e.,

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

回答2:

You can use the fact that browsers place the caret immediately after the inserted image and work back from there. The following requires DOM Range and selection support, which rules out IE <= 8, but if that's important then you can use a library such as my own Rangy to fill that gap.

Demo: http://jsfiddle.net/xJkuj/

Code:

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

回答3:

This is my way:

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

来源：https://stackoverflow.com/questions/12507328/how-to-get-the-image-element-after-insert-using-execcommand

标签

javascript

html5

contenteditable

execcommand

insert-image