Question

I want to understand how tinymce functions.

the rich text editor contains an html document within an iframe. how are the nested DOM elements inside editable, In other word how am I able to type inside a <div> or a <p> layer when there is no textarea or input field involved (at least I dont see any)?

are the elements converted to input fields when they are active?

edit: If your going to vote down the question, please state why.

Answer 1

In tinyMCE’s case (and most other editors) it’s an <iframe> (as to not inherit styling from the parent page, among other reasons), but the magic is the contentEditable attribute being set to true.

You can read more detail in the working draft of HTML5 here.

You can test a very simplified demo here, the editors do much more of course with their toolbars, a backing <textarea> to store the markup for server-submission, etc…but your question seems to be how are you editing the elements, the core of that is contenteditable.