tinymce:富文本模式，它如何工作 [英] tinymce: rich text mode, how does it work

问题描述

我想了解tinymce的功能.

I want to understand how tinymce functions.

富文本编辑器在iframe中包含一个html文档.嵌套的DOM元素如何在内部可编辑，换句话说，当没有textarea时，如何在< div> 或< p> 层中键入或涉及的输入字段(至少我看不到任何内容)?

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.

推荐答案

在tinyMCE(和大多数其他编辑器)的情况下，它是< iframe> (为了不从父页面继承样式，以及其他原因)，但是魔术是 contentEditable 属性设置为 true .

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.

您可以在此处阅读HTML5的工作草案中的更多详细信息.

您可以在此处测试一个非常简化的演示，编辑人员当然可以在此基础上做更多的事情工具栏，支持存储用于提交服务器的标记的< textarea> 等，但是您的问题似乎是如何编辑元素，其核心是 contenteditable .

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.

这篇关于tinymce:富文本模式，它如何工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！