tinymce: rich text mode, how does it work

流过昼夜 提交于 2020-11-27 05:01:44

问题


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.


回答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.



来源:https://stackoverflow.com/questions/3948193/tinymce-rich-text-mode-how-does-it-work

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!