zaixianshouce
zaixianshouce

14.5 富文本编辑【JavaScript高级程序设计第三版】

阅读更多

富文本编辑，又称为WYSIWYG（What You See Is What You Get，所见即所得）。在网页中编辑富文本内容，是人们对Web 应用程序最大的期待之一。虽然也没有规范，但在IE 最早引入的这一功能基础上，已经出现了事实标准。而且，Opera、Safari、Chrome 和Firefox 都已经支持这一功能。这一技术的本质，就是在页面中嵌入一个包含空HTML 页面的iframe。通过设置designMode 属性，这个空白的HTML 页面可以被编辑，而编辑对象则是该页面元素的HTML 代码。designMode 属性有两个可能的值："off"（默认值）和"on"。在设置为"on"时，整个文档都会变得可以编辑（显示插入符号），然后就可以像使用字处理软件一样，通过键盘将文本内容加粗、变成斜体，等等。
可以给iframe 指定一个非常简单的HTML 页面作为其内容来源。例如：




Blank Page for Rich Text Editing

这个页面在iframe 中可以像其他页面一样被加载。要让它可以编辑，必须要将designMode 设置为"on"，但只有在页面完全加载之后才能设置这个属性。因此，在包含页面中，需要使用onload 事件处理程序来在恰当的时刻设置designMode，如下面的例子所示：

等到以上代码执行之后，你就会在页面中看到一个类似文本框的可编辑区字段。这个区字段具有与其他网页相同的默认样式；不过，通过为空白页面应用CSS 样式，可以修改可编辑区字段的外观。

14.5.1 使用contenteditable属性

另一种编辑富文本内容的方式是使用名为contenteditable 的特殊属性，这个属性也是由IE 最早实现的。可以把contenteditable 属性应用给页面中的任何元素，然后用户立即就可以编辑该元素。
这种方法之所以受到欢迎，是因为它不需要iframe、空白页和JavaScript，只要为元素设置contenteditable 属性即可。

这样，元素中包含的任何文本内容就都可以编辑了，就好像这个元素变成了