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

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

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.