Inserire l'immagine in "contenteditable" div utilizzando popup

Question

Ho un pulsante "Inserisci immagine" che chiama una finestra popup. In questo popup, l'utente può inviare un'immagine al server usando PHP. Quando l'invio è riuscito, ottengo una pagina con un TESTO INPUT. Il valore di questo INPUT è il nome del file inviato (ad esempio: image.jpg).

Ecco il mio problema. Vorrei inserire questo image.jpg sul mio contentEditable div (finestra madre).

E vorrei mantenere l'immagine nello stesso punto in cui si trovava il cursore del mouse.

Ho trovato un esempio qui .. Ma quando il mio codice immagine è incluso nel div, appare come un testo .. Non come un tag html ... Quindi ottengo solo il testo, non l'immagine!

Ecco quello che ho fatto ..

script:

function isOrContainsNode(ancestor, descendant) { 
    var node = descendant; 
    while (node) { 
     if (node === ancestor) { 
      return true; 
     } 
     node = node.parentNode; 
    } 
    return false; 
} 

function insertNodeOverSelection(node, containerNode) { 
    var sel, range, html, str; 


    if (window.getSelection) { 
     sel = window.getSelection(); 
     if (sel.getRangeAt && sel.rangeCount) { 
      range = sel.getRangeAt(0); 
      if (isOrContainsNode(containerNode, range.commonAncestorContainer)) { 
       range.deleteContents(); 
       range.insertNode(node); 
      } else { 
       containerNode.appendChild(node); 
      } 
     } 
    } else if (document.selection && document.selection.createRange) { 
     range = document.selection.createRange(); 
     if (isOrContainsNode(containerNode, range.parentElement())) { 
      html = (node.nodeType == 3) ? node.data : node.outerHTML; 
      range.pasteHTML(html); 
     } else { 
      containerNode.appendChild(node); 
     } 
    } 
} 

STILE

#editable { width:100%; height:100px; border:1px solid black; } 
#oculta { width:100%; height:30px; border:1px solid black; display:none; } 

HTML

<div contenteditable="true" id="editable"> 
</div> 

<div id="oculta"> 
<form name="form"> 
&nbsp;<textarea name="area" rows="2" name="S1" cols="20"></textarea> 
<input type="button" onmousedown="insertNodeOverSelection(document.createTextNode(form.area.value), document.getElementById('editable'));" value="insert"></form> 
</div> 
<input type="button" onmousedown="document.getElementById('oculta').style.display='block';" value="test"> 

Grazie mille!

Answer 1

Sei in grado di ottenere il testo/nome file dell'immagine giusto? Puoi farlo restituire il PERCORSO al file caricato? In tal caso, tutto ciò che devi fare è creare dinamicamente un tag img e modificarne l'attributo "src" nel percorso del file.

cambiamento ->insertNodeOverSelection(document.createTextNode(form.area.value), document.getElementById('editable')); a

var x=document.createElement('img'); 
x.src=form.area.value; 
insertNodeOverSelection(x, document.getElementById('editable'));