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>