tinymce: rich text mode, how does it work
I want to u开发者_运维技巧nderstand 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.
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
.
精彩评论