Insertar imagen en div "contenteditable" usando popup

Question

Tengo un botón de "insertar imagen" que llama a una ventana emergente. En esta ventana emergente, el usuario puede enviar una imagen al servidor usando PHP. Cuando el envío es con éxito, obtengo una página con un TEXTO DE ENTRADA. El valor de esta ENTRADA es el nombre del archivo enviado (por ejemplo: image.jpg).

Aquí está mi problema. Me gustaría insertar esta image.jpg en mi contentEditable div (ventana madre).

Y me gustaría mantener la imagen en el mismo lugar donde estaba el cursor del mouse.

Encontré un ejemplo aquí ... Pero cuando mi código de imagen está incluido en el div, aparece como un texto ... No como una etiqueta html ... ¡Así que obtengo solo el texto, no la imagen!

Aquí es lo que tengo ..

Guión:

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

ESTILO

#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"> 

Muchas gracias!

Answer 1

Usted puede obtener el texto/nombre de archivo de la imagen ¿no? ¿Puedes hacer que devuelva la RUTA al archivo cargado? Si es así, todo lo que necesita hacer es crear dinámicamente una etiqueta img y cambiar su atributo "src" a la ruta del archivo.

cambio ->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'));