Search code examples
javascriptjquerywysiwygcontenteditableexeccommand

Contenteditable div vs. iframe in making a rich-text/wysiwyg editor

i'm trying to weigh the pros and cons of using a <div> vs. <iframe> in making my own rich text/wysiwyg editor.

In doing so, why can't I just use a contenteditable <div> and why do so many people prefer the <iframe> ?

Background discussion: A common way to go about making a wysiwyg editor as I understand is to make a div or iframe contenteditable and to then to do execCommand on the document containing the div or the iframe body to make its text bold or whatever.

Here's the HTML:

<html><!--parent doc-->
  <body><button type="button" class="btn-bold">Bold</button>
       <div contenteditable="true"></div>
  </body>
</html>

vs.:

<html><!--parent doc-->
  <body><button type="button" class="btn-bold">Bold</button>
    <iframe>
       <body contenteditable="true"></body>
    </iframe>
  </body>
</html>

and the JS:

$(document.body).on('click', '.btn-bold', function(){
     document.execCommand('bold', false, null); 
});

vs.:

$(document.body).on('click', '.btn-bold', function(){
     window.frames[0].document.body.execCommand('bold', false, null); 
});

It looks like most well-made rich-text editors use an iframe. While I can easily get this contenteditable /execCommand 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 <div>-based method seems preferable. Any strong reasons I reconsider?

Solution

  • Reasons for the iframe

    Pros

    1. CSS isolation
    2. Security isolation (I am not able to detail this point, I repeat what I read)

    cons

    1. Heavier (but not to a significant/ noticeable point)
    2. More difficult to access from JavaScript.

    Personally, I developed my own editor and I choose to put it in an iframe.