30

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?

meager
  • 209,754
  • 38
  • 307
  • 315
tim peterson
  • 22,033
  • 50
  • 162
  • 279
  • 1
    possible duplicate of [building a wysiwyg editor](http://stackoverflow.com/questions/4426478/building-a-wysiwyg-editor) – AlfonsoML Apr 15 '12 at 13:51
  • hi AlfonsoML, thanks for the link, unfortunately it does not deal with the heart of the matter which is that I can't get Firefox to easily work with `contenteditable` in iframes. I'd rather not have to make an entire different set of code to deal with this browser and so I'm just wondering why can't I just use a div instead of an iframe. – tim peterson Apr 15 '12 at 15:06
  • 1
    Also, this link is a year and a half old. The browsers have changed quite a bit since then and I have decreasing interest in supporting older browsers. – tim peterson Apr 15 '12 at 15:24
  • 2
    Although you might think that the link is "old", the fact is that the browser haven't really changed that much with regards to contentEditable. They are improving it little by little but you'll still need a bunch of code to get it work across browsers in the same way. The answer by Tim Down provides an outline (as well as an answer about the iframe vs div) but the most important part is at the beginning: Doing it correctly takes a lot of time and effort. Unless you want to do it just to learn then you should pick up one of the many existing editors. – AlfonsoML Apr 15 '12 at 18:02
  • ok, i'll just keep thinking about what i want to do, thanks for your thoughts, – tim peterson Apr 15 '12 at 18:35
  • Good points Alfons. My team spent a year building an editor. It was based on Telerik, and it was still very complicated once we got into custom logic. Definitely use Rangy and a pre-built editor (Telerik, TinyMCE, etc). It's just not worth the pain. – Morgan T. Apr 16 '12 at 13:52
  • If you use an existing editor like CKEditor or TinyMCE you might not need to use Rangy at all since those editors provide their own implementation to handle ranges. – AlfonsoML Apr 16 '12 at 16:53
  • hi Alfonso and MorganTiley, thanks for the advice, i'm still learning to program so I'd like to learn whats behind the scences for some of these things, but yes there are lots of nice wysiwyg plugins out there for those looking for a faster solution, – tim peterson Apr 16 '12 at 18:10
  • 2
    I do realize it's been a while since the question was asked, but your HTML code of an iframe is faulty - the code in between – Tomalla Apr 20 '14 at 16:06

2 Answers2

31

First of all... Don't try to make your own WYSIWYG editor if you're thinking about commercial use. It's a cool idea for a personal project, because you can learn a lot, but it will take you years to create editor that you will be able to sell to someone that cares about if it really works, not just looks. I've seen recently some really cool looking new editors, but they really doesn't work. Really. And that's not because their developers suck - it's because browsers suck.

OK, that was a great intro, now some facts:

  1. I'm one of CKEditor's devs.
  2. It's been developed for around 10 years.
  3. We still have around 1 thousand active issues on our Trac.
  4. We don't suck in web developing :P.

Now the answer - in addition to what Tim Down wrote here building a wysiwyg editor you can read what I wrote under this question HTML WYSIWYG edtor: why is the editable content moved in an iFrame

Basically, in an iframe you're safer, you've got entire document, content won't leak out of your editable element, you can use styles, etc. There are also few drawback of the iframe approach - it's heavier, bootstrap code is... really tricky, you can't inherit styles of the website to which editor is attached, I guess that managing focus may be more difficult in this case and you have to pay attention in which document you're creating new elements (relevant only in IE<8).

And remember - don't write your own editor unless you're prepared for problems like this Paste as plain text Contenteditable div & textarea (word/excel...) :D

Shashank Vivek
  • 13,776
  • 7
  • 48
  • 88
Reinmar
  • 21,228
  • 4
  • 53
  • 72
18

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.

Community
  • 1
  • 1
Benibur
  • 796
  • 9
  • 9
  • Since a rich text editor is creating html tags, an example of a security issue is that a dynamically generated tag in the editor with a missing or incorrectly formatted closing tag could break the whole document. Iframes solve this problem because broken tags can't affect anything outside of their own document. Reinmar's answer below has a lot more information! – alegscogs Feb 13 '15 at 22:31