javascript基础从小白到高手系列六百七十七：富文本编辑

在网页上编写富文本内容是Web 应用开发中很常见的需求。富文本编辑也就是所谓的“所见即所
得”（WYSIWYG，What You See Is What You Get）编辑。虽然没有规范定义，但源自IE 的一套事实标
准已经被Opera、Safari、Chrome 和Firefox 所支持。基本的技术就是在空白HTML 文件中嵌入一个
iframe。通过designMode 属性，可以将这个空白文档变成可以编辑的，实际编辑的则是元素
的HTML。designMode 属性有两个可能的值：“off”（默认值）和"on"。设置为"on"时，整个文档
都会变成可以编辑的（显示插入光标），从而可以像使用文字处理程序一样编辑文本，通过键盘将文本
标记为粗体、斜体，等等。
作为iframe 源的是一个非常简单的空白HTML 页面。下面是一个例子：

这个页面会像其他任何页面一样加载到iframe 里。为了可以编辑，必须将文档的designMode 属 性设置为"on"。不过，只有在文档完全加载之后才可以设置。在这个包含页面内，需要使用onload 事件处理程序在适当时机设置designMode，如下面的例子所示： 以上代码加载之后，可以在页面上看到一个类似文本框的区域。这个框的样式具有网页默认样式， 不过可以通过CSS 调整。 使用contenteditable 还有一种处理富文本的方式，也是IE 最早实现的，即指定contenteditable 属性。可以给页面中的任何元素指定contenteditable 属性，然后该元素会立即被用户编辑。这种方式更受欢迎，因为 不需要额外的iframe、空页面和JavaScript，只给元素添加一个contenteditable 属性即可，比如：

元素中包含的任何文本都会自动被编辑， 元素本身类似于 元素。通过设置 contentEditable 属性，也可以随时切换元素的可编辑状态： let div = document.getElementById("richedit"); richedit.contentEditable = "true"; contentEditable 属性有3 个可能的值："true"表示开启，"false"表示关闭，"inherit"表示 继承父元素的设置（因为在contenteditable 元素内部会创建和删除元素）。IE、Firefox、Chrome、 Safari 和Opera 及所有主流移动浏览器都支持contentEditable 属性。