Why javascript editors use iframe to implement?

Question

Why do they prefer using iframe and turn on design mode by .contentWindow.document.designMode = "on" instead of directly using textarea?

Answer 1

I suppose using an iframe allows for better isolation : the editor can do pretty much whatever it wants, without any risk of conflict with the rest of your page -- especially for CSS and Javascript.

Answer 2

The reason is that you won't be able to live preview the styles applied using your editor in a textarea. Whenever you apply styles like pressing Ctrl + B the section inside the iframe can render the characters in bold format whereas in a textarea it won't be possible. Textarea is for entering non formatted values whereas a design mode turned on iframe is for entering formatted text.

You can use any other element like div and can turn that into an editor. But using iframe you can have a separate document and can manipulate that without considering the parent page in which the iframe is set.

Answer 3

Most browsers have had some kind of editable mode for quite a while but until quite recently some browsers (such as Firefox until version 3) only supported designMode, which works only on a whole document, rather than the more flexible contentEditable, which can be switched on and off for individual elements within a document. WYSIWYG editors were therefore obliged to use an iframe to support such browsers.