IFrame 系列1 ----designMode和contentEditable属性全方位解析

来源：互联网发布：27岁未婚单身女知乎编辑：程序博客网时间：2024/05/16 07:40

pre{ font-family: courier new!important; font-size: 12px!important; word-wrap: break-word; white-space: pre-wrap; background-color: rgb(245, 245, 245); font-family: courier new!important; font-size: 12px!important; border: 1px solid rgb(204, 204, 204); padding: 5px; overflow: auto; margin: 5px 0; color: rgb(0, 0, 0); .anikin_p{ line-height: 24.5px; color:red; margin-top: 15px; margin-bottom: 25px; padding: 15px 20px; box-sizing: border-box; border-width: 0px 0px 0px 5px; border-left-style: solid;border-left-color: rgb(0, 163, 207); font-family: " font-size: 14px; outline: 0px; vertical-align: baseline; overflow: hidden; color: rgb(119, 119, 119);background: rgb(246, 246, 246);}.anikin_strong{ line-height: 24.5px; box-sizing: border-box; border: 0px; font-family: inherit; font-style: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;

DesignMode 跟 contentEditable 这个两个属性一般常用在 iframe中，在富文本编辑器之类中反光发热。

实现可视化编辑，可以使用contentEditable和designMode两种方法。 contentEditable 刚开始在IE上实现，后来各大浏览器陆续支持contentEditable，HTML5标准也包含 contentEditable。

[1]: designMode 只能把 document整体改成可编辑状态

[2]: contentEditable 可以把任何HTML元素改成可编辑状态

   var ifr = document.getElementById("editor");  // iframe 的id 位editor
   var doc = ifr.contentDocument || ifr.contentWindow.document; // W3C || IE  方式获取iframe的文档对象 
   doc.designMode= "on";  
   doc.contentEditable= true;

0 0