富文本编辑
富文本编辑又称为: WYSIWYG(What You See Is What You Get,所见即所得)
常用于博客等用途,虽然没有规范,但是在IE最先引入后其他的浏览器厂商也相继完成了对应功能的实现
该技术的本质就是在 HTML 页面中嵌入<iframe>
通过设置页面的 designMode 属性,使该页面可以被编辑
将该属性设置为 on 后文档就会变得可编辑 "off" 是默认值
以下方的 HTML 代码为例
<!DOCTYPE html> <html> <head> <title>Page Title</title> </head> <body> </body> </html>
该页面在 iframe 中可以像其它页面一样被加载
如果要让该页面可编辑,则需要将 designMode 设置为 on
但是该属性只有在页面加载完成后才可以访问,所以需要借用 onload 事件在合适的时候设置该属性
如下代码所示:
<iframe name="richedit" style="height:500px;width:100px;" src="blank.html"></iframe> <script> window.onload=function(){ frames["richedit"].document.designMode = "on"; } </script>
该代码片段执行后,页面中则会出现类似文本框的可编辑区字段,该字段具有与其他网页一一致的默认样式,但是通过对 blank.html 的 CSS 进行设置就可以修改可编辑区域的外观
contenteditable属性
除了使用 iframe 这种方式之外,另一种富文本内容的方式是使用名为: contenteditable 的特殊属性
该属性最早由IE实现,可以应用于页面中的任何元素,然后用户就可以编辑该元素
这种方式的优点在于:
- 不用 iframe,空白页,JS
- 只需要为元素设置 contenteditable 属性即可
该属性允许三种值:
- "true" 打开富文本编辑器
- "false" 表示关闭富文本编辑器
- "inherit" 表示该值从父元素继承