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 🙂