HTML WYSIWYG edtor: why is the editable content moved in an iFrame

Question

Why is the editable html moved into an iFrame? I analysed different editors (TinyMce, CKEditor, etc) and all move the editable content into a separate iFrame which they lay over the original text.

What is the technical reason for this. I experimented with the contenteditable="true", which is the base of all this editors too, and didn't find a reason yet to do this.

Answer 1

I'm CKEditor core developer. Not for a long time - just for last half of the year, but I've learnt a lot about why we use iframed editable :)

1. Styling - content of the iframed editor doesn't inherit styles of the page. This is extremely important, because we cannot reset styles (sic! CSS really sucks). What's more - in iframe we can freely add our own styles which is helpful too.

2. Only in iframed editable we can work on entire page with head, metas, body styles, title, etc. Some of our users need this.

3. Browsers have very buggy (and incomplete) impls of contenteditable. E.g. guess what will happen when you paste list into the editable which is a <h1> element on Firefox (you can check that in this editor - http://createjs.org/demo/hallo/)? It will leak out of editable area and become a non-editable element. We have to handle these cases manually in the editor and this is really hard work :).

4. I'm not sure about this but I believe that designMode wich allows to switch entire document into the editable area had been first and contenteditable came later. So the reason may be historical too - it's hard to switch from one approach to another.

5. Probably there're more reasons why we use an iframed editable. I'll update my answer when I'll learn them :)

Answer 2

From the tinymce froum

Hi Zappino!

It is the very nature of editors like TinyMCE to use an IFrame because in a frame you can modify any part of an HTML document to suit your needs without breaking anything in the main page's document. Especially if you want to edit a complete HTML document including the parts between and you won't be able to do so without an IFrame.

Cross Domain Skripting will occur if you store TinyMCE's files on a different (sub-)domain than the page from which you embed the editor. Show us a test scenario of your installation with which you are having trouble and someone might be able to help you out!

Greetings from Germany (back to Germany )

Felix Riesterer.