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

12
votes

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.

2
htmleditortinymceckeditorwysiwyg
I guess one main reason is styling. CSS rules from the parent document would inevitably influence the WYSIWYG, often leading to problematic results. – Pekka
But couldn't there be an issue, when youz put the text back into the origninal website? Like a forum, you enter the text for an article and then post it on the page. Then you whant the style of the original document, to see how he looks... – Stefan
in that case, you would actively apply the page's styles to the iframe (all big WYSIWYG editors have an option for that). I agree there are situations where one would prefer having it the way you describe. – Pekka
do you maybe happen to know the parameter for applying the page style. All I found is, to apply a speciffic css file to tinymce, but not how to apply the whole page style – Stefan
You will have to use a style sheet file, there is no sane way to transfer styles from one document to the other – Pekka

2 Answers

13
votes

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 :)

5
votes

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.