1.designMode
document的属性值，表示整个是否可编辑，可读可写，有两个值：“on”、“off” 默认为 off
document.designMode = 'on' 即可开启
2.user-modify
css属性 需要写成 -webkit-user-modify、-moz-user-modify 兼容性较差
user-modify: read-only; //只读（默认状态）
user-modify: write-only; //无浏览器支持 忽略
user-modify: read-write; //读写，支持富文本
user-modify: read-write-plaintext-only; //读写，但只可输入文本
使用user-modify之后，isContentEditable是检测不到的该元素是否可编辑的
3.contenteditable
某个节点是否可编辑
可通过修改节点的contentEditable 的true或false来开关
优：相比textarea而言 在不设置高度的情况下 高度可以自动撑开
劣：回车键换行会自动插入div标签
contenteditable="" //与contenteditable="true"效果一样
contenteditable="events"
contenteditable="caret"
contenteditable="typing"
contenteditable="plaintext-only" //可编辑，只允许纯文本
contenteditable="true" //可编辑，支持富文本
contenteditable="false" //不可编辑
contenteditable="false" //不可编辑
4.isContentEditable
检查元素是否可以编辑 ，设置user-modify无效
一个有趣的应用：页面上可直接编辑html样式
- style元素必须放在body元素内
- style元素要设置display: block;
<body>
<style class="textarea" style="display: block; -webkit-user-modify: read-write-plaintext-only;">
html {
background-color: #fff;
}
</style>
</body>
