title: Insert image in "contenteditable" div using popup
body: <p>I have a "insert image" button that calls a popup window. 
  I this popup, user can send an image to server using PHP. When the send is sucessifully, I get a page with a INPUT TEXT. The value os this INPUT is the name of the file sent (for example: image.jpg).</p>
  
  <p>Here is my problem. I would like to insert this image.jpg on my contentEditable div (mother window).</p>
  
  <p>And I would like to keep the image same place where the mouse cursor was.</p>
  
  <p>I found one example here.. But when my image code is included on the div, it appears as a text.. Not as a html tag... So I get only the text, not the image!</p>
  
  <p>Here is what i got.. </p>
  
  <p>SCRIPT:</p>
  
  <pre><code>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 &amp;&amp; sel.rangeCount) {
              range = sel.getRangeAt(0);
              if (isOrContainsNode(containerNode, range.commonAncestorContainer)) {
                  range.deleteContents();
                  range.insertNode(node);
              } else {
                  containerNode.appendChild(node);
              }
          }
      } else if (document.selection &amp;&amp; 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);
          }
      }
  }
  </code></pre>
  
  <p>STYLE</p>
  
  <pre><code>#editable { width:100%; height:100px; border:1px solid black; }
  #oculta { width:100%; height:30px; border:1px solid black; display:none; }
  </code></pre>
  
  <p>HTML</p>
  
  <pre><code>&lt;div contenteditable="true" id="editable"&gt;
  &lt;/div&gt;
  
  &lt;div id="oculta"&gt;
  &lt;form name="form"&gt;
  &amp;nbsp;&lt;textarea name="area" rows="2" name="S1" cols="20"&gt;&lt;/textarea&gt;
  &lt;input type="button" onmousedown="insertNodeOverSelection(document.createTextNode(form.area.value), document.getElementById('editable'));" value="insert"&gt;&lt;/form&gt;
  &lt;/div&gt;
  &lt;input type="button" onmousedown="document.getElementById('oculta').style.display='block';" value="test"&gt;
  </code></pre>
  
  <p>Thanks a lot!</p>