title: (IE6) insert content into iframe at current cursor position
body: <p>I'm currently upgrading a WYSIWYG Rich Text Editor that was based on the DHTML Editor Control (DEC) to use the more modern editor controls in modern browsers. I'm using an iFrame with design mode turned on and a mixture of regular javascript and jquery. </p>
  
  <p>One of my requirements is to insert html content (forms etc) into the iframe so that users can edit them. I have it working in FF + Chrome, but IE is proving a pain. My current code inserts the content at the start of the parent document and not the iframes, I'm using the selection.createRange() function that when used with DEC would insert the content either at the cursor if the control was selected or at the end of the document inside the editor if not. </p>
  
  <p>Currently it only works when I select some text in IE. Heres my current code (apologies if it looks unformatted the firewall at work is blocking a lot of the css + js from stackoverflow), any ideas?</p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
      &lt;title&gt;Text Editor Test&lt;/title&gt;
      &lt;style type="text/css"&gt;
          .toolbar {background-color:#BFC193;width:500px;padding:5px;}    
          #insertForm {position: absolute;height:60px;width:200px;top:50px;left:50px;border:1pt solid black;background-color:#fff;padding:10px;}          
      &lt;/style&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
      &lt;h1&gt;MSHTML Text Editor&lt;/h1&gt;
      &lt;form id="frmEdit"&gt;
      &lt;div class="toolbar" id="toolbar"&gt;
          &lt;input type="button" name="insertHTML" value="insert html" onClick="showForm();"/&gt;
      &lt;/div&gt;      
  
      &lt;div id="insertForm" style="display:none;"&gt; 
          Insert Content Form
          &lt;input type="button" value="OK" style="width: 80px" onClick="insertContent();"&gt;
      &lt;/div&gt;
  
      &lt;script type="text/javascript" src="jquery-1.6.4.js"&gt;&lt;/script&gt;
  
      &lt;script type="text/javascript"&gt;
          // functions to execute once the DOM has loaded.    
          $(document).ready(function() {
              pageInit();                         
          });
  
          function pageInit() {
              // create iframe           
              $('.toolbar').after("&lt;iframe id='frameEdit' style='width:500px; height:400px' &gt;&lt;/iframe&gt;");
  
              //insert delay for firefox + webkit browsers before turning on designMode open + close seems to do the job  
              document.getElementById('frameEdit').contentWindow.document.open();
              document.getElementById('frameEdit').contentWindow.document.close();
  
              document.getElementById('frameEdit').contentWindow.document.designMode='On';    
          }
  
          function showForm() {
              $('#insertForm').toggle();
          }       
  
          function insertContent() {
              // turn off form
              showForm();
              // set test content
              var htmlContent = "&lt;p&gt;Insert Test&lt;/p&gt;";
  
              var doc = document.getElementById('frameEdit').contentWindow.document;
              if (doc.selection &amp;&amp; doc.selection.createRange) { // IE
                  var range = doc.selection.createRange();    
                  range.pasteHTML(htmlContent);
              } else { // FF
                  doc.execCommand('insertHTML', false, htmlContent);
              } 
          }       
      &lt;/script&gt;
      &lt;/form&gt;
  &lt;/body&gt;
  &lt;/html&gt; 
  </code></pre>