泡杯感冒灵
泡杯感冒灵

表单脚本相关08

富文本编辑

  • 富文本编辑，又称为WYSIWYG(What Tou 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样式，可以修改可编辑区字段的外观。
使用 contenteditable 属性
  • 另一种编辑富文本内容的方式是使用名为 contenteditable的特殊属性，这个属性也是由IE最早实现的。可以把contenteditable属性应用给页面中的任何元素，然后用户立即就可以编辑该元素。这种方法之所以受欢迎，是以为它不需要 iframe,空白页和 JavaScript,只要为元素设置contenteditable属性即可。
image.png
  • 这样，元素中包含的任何文本内容就都可以编辑了，就好像这个元素变成了