富文本编辑器（Rich Text Editor）是在网页上使用的一种所见即所得的文本编辑器，是 Web 应用开发中很常见的需求。
富文本实现
在 HTML 文档上共有 2 中方式实现富文本编辑器。一种是使用 iframe，另一种是使用 contenteditable 属性指定 HTML 文档元素。
iframe
第一种方式是使用 iframe 标签。
在空白的 HTML 文档中嵌入一个 iframe，并将 designMode 属性设置为 "on"，文档就会变成可编辑的，实际编辑的则是 元素的 HTML，默认值是 "off"。文档变成可编辑后，就可以像使用文字处理程序一样编辑文本，通过键盘将文本标记为粗体、斜体等等。
作为 iframe 源的是一个非常简单的空白 HTML 页面。下面是一个例子：
Blank Page for Rich Text Editing
这个页面会像其他任何页面一样加载到 iframe 里。为了可以编辑，必须将文档的 designMode 属性设置为 "on"。不过，只有在文档完全加载之后可以设置。在这个包含页面内，需要使用 onload 事件处理程序在适当时机设置 designMode，如下面的例子所示：
<script>
window.addEventListener("load", () => {
frames["editor"].document.designMode = "on";
});
</script>以上代码加载之后，可以在页面上看到一个类似文本框的区域。这个框的样式具有网页默认样式，不过可以通过 CSS 调整。
contenteditable
第二种方式是使用 contenteditable 属性指定 HTML 文档中的元素。该方式是 IE 最早实现的。使用方式是在一个元素上添加 contenteditable 属性并设置为 true 或者空字符串""，然后该元素会立即被用户编辑。如下所示：
元素中包含的任何文本都会自动被编辑， 元素本身类似于