tinymce：富文本模式，它是如何工作的

Question

我想了解 tinymce 的功能。

富文本编辑器在 iframe 中包含一个 html 文档。内嵌的 DOM 元素是如何可编辑的，换句话说，当没有涉及文本区域或输入字段时（至少我看不到任何内容），我如何能够在 <div> 或 <p> 层内输入内容？

元素在活动时是否转换为输入字段？

编辑：如果您要对该问题投反对票，请说明原因。

Answer 1

在 tinyMCE（和大多数其他编辑器）的情况下，它是 <iframe>（因为不从父页面继承样式，以及其他原因），但神奇的是 contentEditable attribute 被设置为 true。

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

You can test a very simplified demo here，编辑们当然会用他们的工具栏做更多的事情，支持<textarea> 来存储服务器提交的标记等......但你的问题似乎是你如何编辑元素，其核心是contenteditable。