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.

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.

• javascript
• jquery
• tinymce
• text-editor

• An answer to your question is way beyond the scope of SO. You could try TinyMCE's forum: tinymce.moxiecode./punbb Asking for thousands of lines of code to be condensed into a post that fits in a forum is still pretty broad, though. – Thomas Commented Oct 16, 2010 at 9:03
• 2 Voting up! Good question. I was looking for the same answer. As I understand the question (and what I need), we don't care about tinymce, just need to understand the mechanism to reuse it in our own solutions. This is exactly what SO for :) – Mike Keskinov Commented Jul 12, 2017 at 22:52

1 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.