title: Contenteditable div vs. iframe in making a rich-text/wysiwyg editor
body: <p>i'm trying to weigh the pros and cons of using a <code>&lt;div&gt;</code> vs. <code>&lt;iframe&gt;</code> in making my own rich text/wysiwyg editor.</p>
  
  <p>In doing so, why can't I just use a <em>contenteditable</em> <code>&lt;div&gt;</code> and why do so many people prefer the <code>&lt;iframe&gt;</code> ?</p>
  
  <p>Background discussion:
  A common way to go about making a wysiwyg editor as I understand is to make a div or iframe <em>contenteditable</em> and to then to do <code>execCommand</code> on the document containing the div or the iframe body to make its text bold or whatever.</p>
  
  <p>Here's the HTML:</p>
  
  <pre><code>&lt;html&gt;&lt;!--parent doc--&gt;
    &lt;body&gt;&lt;button type="button" class="btn-bold"&gt;Bold&lt;/button&gt;
         &lt;div contenteditable="true"&gt;&lt;/div&gt;
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>vs.:</p>
  
  <pre><code>&lt;html&gt;&lt;!--parent doc--&gt;
    &lt;body&gt;&lt;button type="button" class="btn-bold"&gt;Bold&lt;/button&gt;
      &lt;iframe&gt;
         &lt;body contenteditable="true"&gt;&lt;/body&gt;
      &lt;/iframe&gt;
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>and the JS:</p>
  
  <pre><code>$(document.body).on('click', '.btn-bold', function(){
       document.execCommand('bold', false, null); 
  });
  </code></pre>
  
  <p>vs.:</p>
  
  <pre><code>$(document.body).on('click', '.btn-bold', function(){
       window.frames[0].document.body.execCommand('bold', false, null); 
  });
  </code></pre>
  
  <p>It looks like most well-made rich-text editors use an iframe. While I can easily get this <em>contenteditable</em> /<code>execCommand</code> combo to work on a div/iframe in Webkit browsers, I'm having a hellish time trying to get the iframe to work in Firefox. I'm having to resorting to loading scripts and stylesheets into the iframe and all sorts of nonsense to duplicate what I can easily accomplish with the div-based version. So the <code>&lt;div&gt;</code>-based method seems preferable. Any strong reasons I reconsider?</p>