title: Iframe and firefox problems
body: <p>I am designing a simple Rich Text Editor using HTML/Javascript. It uses iframe. While it is working great in IE6 (and possibly newer IE versions), it is broken in FireFox. The iframe cannot be edited or used in any way.</p>
  
  <p><strong>The HTML <code>&lt;body&gt;</code></strong></p>
  
  <pre><code>&lt;input type="button" id="bold" class="Button" value="B" onClick="fontEdit('bold');"&gt;
  &lt;input type="button" id="italic" class="Button" value="I" onClick="fontEdit('italic');"&gt;
  &lt;input type="button" id="underline" class="Button" value="U" onClick="fontEdit('underline');"&gt;
  &lt;hr&gt;
  &lt;iframe id="TextEditor" class="TextEditor"&gt;&lt;/iframe&gt;
  </code></pre>
  
  <p><strong>The Javascript (for IE)</strong></p>
  
  <pre><code>TextEditor.document.designMode="on";
  TextEditor.document.open();
  TextEditor.document.write('&lt;head&gt;&lt;style type="text/css"&gt;body{ font-family:arial; font-size:13px; }&lt;/style&gt; &lt;/head&gt;');
  TextEditor.document.close();
  TextEditor.focus();
  </code></pre>
  
  <p><em>The above script makes iframe editable in IE. Fails to do so in FF. So I changed a few things for FF version-</em></p>
  
  <p><strong>The Javascript (for FF)</strong></p>
  
  <pre><code>id("TextEditor").contentWindow.designMode="on";
  id("TextEditor").contentWindow.open(); //this line is responsible for pop-ups
  id("TextEditor").contentWindow.write('&lt;head&gt;&lt;style type="text/css"&gt;body{ font-family:arial; font-size:13px; }&lt;/style&gt; &lt;/head&gt;'); //this line throws error: id("TextEditor").contentWindow.write is not a function at the FF debug console.
  id("TextEditor").contentWindow.close();
  id("TextEditor").focus();
  </code></pre>
  
  <p><em>This section of code makes FF provoke an pop-up alert with a blank page as a target. It's still broken. What now follows are general functions for things like <code>id()</code> and <code>fontEdit()</code>-</em></p>
  
  <pre><code>function fontEdit(x,y){
    TextEditor.document.execCommand(x,"",y);
    TextEditor.focus();
  }
  
  function id(id){
    return document.getElementById(id);
  }
  
  function tag(tag){
    return document.getElementsByTagName(tag);
  }
  </code></pre>
  
  <p>I'm sure FF doesn't handle iframe this way. So how do I get iframe to be used as a Rich Text Editor and without showing pop-ups. Please try your best to avoid jQuery since I'm not that good in it yet. Which is why the custom functions like <code>id()</code> and <code>tag()</code> exists.</p>
  
  <p>And, I'm aware that there are other freely available Text Editors for <em>me</em> to download and use so please do not suggest me any such solutions and do not ask me <em>why</em> I must re-invent the wheel. Only answer if you know where I am going wrong and if you can actually <em>help</em> me fix the problem.</p>