在线富文本编辑器如何工作？答案

【问题标题】：How do online rich text editors work?在线富文本编辑器如何工作？
【发布时间】：2010-12-29 07:58:20
【问题描述】：

我想知道online rich text editors 在粘贴网页或文档中的文本时如何保持格式。标准的 textarea 框只接受文本，而这些 WYSIWYG 编辑器似乎使用 DIV。它是如何工作的？

【问题讨论】：

标签： javascript richtextbox wysiwyg

【解决方案1】：

通过使用现有的浏览器功能（IE - ContentEditable）。这允许开发人员让用户直接编辑 html。他们通常使用 iFrame 将可编辑部分与页面的其余部分分开，但这不是必需的。

然后开发人员可以简单地读取 iframe（或其他）的 html 源代码，然后就完成了。

【讨论】：

【解决方案2】：

在线富文本编辑器使用contentEditable 或designMode 来利用浏览器对HTML 编辑的原生支持。当您粘贴到 contentEditable 或 designMode 元素中时，浏览器会将 HTML 直接放入元素中。尝试粘贴到Midas Demo，然后使用 Firebug 的检查元素查看您粘贴的 HTML。

JavaScript 应用程序可以使用execCommand 方法来格式化用户在富文本编辑器中的选择。

【讨论】：

【解决方案3】：

WYSIWYG 编辑器实际上建立在浏览器已经内置的基本 HTML 编辑功能之上。在 Firefox 中，该技术称为Midas。在 IE 中，contentEditable。

【讨论】：

好奇：Safari 和 Chrome 使用类似的技术吗？大多数现代浏览器都提供类似的功能吗？
是的，是的：operawiki.info/TextAreaEditor 我不知道 Chrome 叫什么。
@Pekka웃 你的链接失效了