div可编辑contentEditable和designMode

如果要对网页中的一段文本内容进行编辑一般常用的方法是放在一个<input type=’text’ />，但是今天我们要介绍的是不用文本框也可以进行编辑，如标题所示~

设置div或页面元素为可编辑

设置方式

1. contenteditable=”true”，直接在标签上设置contentEditable为true,为false时则恢复到正常状态

   1 <p contenteditable="true" id="edit_p" style="line-height: 1.5;">编辑的文本
   2 </p>

2. 通过脚本来设置

1 window.onload = function() {
2       var edit_p = document.getElementById('edit_p');
3       edit_p.onclick = function(){
4           this.contentEditable = true;
5           this.style.cssText = 'border:2px solid #666';
6       }
7 }

此属性对IE6以上+firfox/chrome/opera都有效~，窃喜~

isContentEditable判断元素是否处于可编辑状态

有的元素默认就是可编辑的，比如文本框，在设置前有时候需要判断是否是可编辑状态可以用element.isContentEditable，该属性是只读的，其结果为布尔值。

contentEditable元素的继承和嵌套

若设置为true则会被后代元素继承，但是可以通过js把子元素强制设置为false。

将整个文档设置为可编辑模式

可以使用document.designMode = ‘on’ 来开启整个文档的可编辑状态，比如目前很常见的可见即所得编辑器一般都是设置引用一个iframe，然后设置该iframe的document.designMode为’on’，来对其中的内容进行操作。

关于整个属性，有两点需要注意：

1. document.designMode是一个可读写属性
2. 当文档处于设计模式时，将不运行脚本