Wie man das image-element nach dem einfügen mit execCommand?

Gibt es eine Möglichkeit, um das image-element, nachdem wir das Bild einfügen mit execCommand? zum Beispiel

e.execCommand('insertimage',0,'ronaldo.png')
InformationsquelleAutor Najib Razak | 2012-09-20
  1. 11

    Nicht verwenden insertimage verwenden plain old insertHTML und geben Sie das element, das Sie einfügen eine ID, so dass Sie für spätere Referenzzwecke.
    d.h.,

    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);
};
    • Guter Vorschlag, obwohl ich meiden mit document.all.
    • Version mit besseren feature-Erkennung: jsfiddle.net/timdown/3PLS5/3
    • Aber, wird diese im IE funktioniert? Die Dokumentation für execCommand sagt, insertHTML funktioniert nicht im IE.
    • das Problem mit dieser Technik ist, dass die Benutzer benötigen, um einige der text vor insertHTML ausgeführt werden kann...
    • Diese Lösung ist anfällig für XSS
    InformationsquelleAutor Kernel James
  2. 6

    Können Sie die Tatsache, dass der Browser platzieren Sie den Cursor unmittelbar nach den eingefügten Bild-und arbeiten von dort zurück. Das folgende erfordert DOM-Palette und Auswahl zu unterstützen, die Regeln, IE <= 8, aber wenn das wichtig ist, dann können Sie eine Bibliothek wie meine eigenen Feingliedrig, die Lücke.

    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);
    }
}
    • Gute Antwort, Aber gibt es eine einfachere Lösung?
    • Nicht, dass ich denken kann. Die execCommand() Aufruf nicht wieder alles so bequem wie eine Referenz auf das eingefügte Bild, so dass Sie zu tun haben, einige DOM-traversal.
    • Du hast Recht,Danke Mann
    • Ich denke, Kernel James ' s Antwort ist besser.
    InformationsquelleAutor Tim Down
  3. 3

    Dies ist mein Weg:

    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
    InformationsquelleAutor user3076450
Schreibe einen Kommentar