2016-03-18 10 views
0

Erstellen eines Texteditors, mit dem Sie ein Bild hochladen können, und dann Hinzufügen der Bild-URL und des Tags img zum editierbaren div-Inhalt.Einfügen von HTML mit meiner aktuellen Einrichtung - textNode

Ich habe alles mit diesem Code-Schnipsel arbeitet ...

function insertTextAtCursor(text) { 
    var sel, range, html; 
    sel = window.getSelection(); 
    range = sel.getRangeAt(0); 
    range.deleteContents(); 
    var textNode = document.createTextNode(text); 
    range.insertNode(textNode); 
    range.setStartAfter(textNode); 
    sel.removeAllRanges(); 
    sel.addRange(range); 
} 

... aber es gibt den HTML-Zeichenfolge, damit ich "<img src=""/>" anstelle des tatsächlichen Bildes zu sehen.

Gibt es eine Möglichkeit, das kann ich tun?

Ich habe eine Antwort von meinem AJAX-Aufruf, wo ich die Funktion verwenden:

this.on("success", function(file, response) { 
    var imageUrl = "https://s3-eu-west-1.amazonaws.com/mys3account/images/" + response.image['name']; 
    insertTextAtCursor("<img src='" + imageUrl + "'/>"); 
}); 

Dank.

+0

ist das Argument 'file' überall auf der AJAX verarbeitet? – zer00ne

Antwort

0

Dies löste es für mich:

var descriptionNode = document.createElement("img"); 
descriptionNode.className = "img"; 
descriptionNode.src = text; 

range.insertNode(descriptionNode); 
range.setStartAfter(descriptionNode); 

von hier genommen: https://stackoverflow.com/a/8031639/2921557