可编辑的页面——designMode、contenteditable和user-modify
简介
前几天想研究一下富文本编辑器，发现这玩意涉及的知识点和“坑”还真不少。 谁知道在查阅资料时还有一些额外的收获😄 。
于是，今天不谈富文本编辑器，而是一起学一下跟它相关的几个神奇的属性。 或许好多同学跟我一样，还从没见过，它们分别是：isContentEditable、designMode、user-modify 和几乎人人都知道的contenteditable。
isContentEditable
很简单，一个只读的属性，返回true或false，表示页面元素是否可编辑。
designMode
是document的一个全局开关，可读可写，有两个值：“on”、“off”，表示整个页面是否可编辑。一般情况下，document.designMode返回是off。 可以手动设置’开‘或者’关‘，不妨自己试一下，在console里输入:
document.designMode = 'on'
再用鼠标点一点页面，是不是发现了神奇的现象？！
参考下图：
整个页面都变成了可编辑状态。
这时候，所有元素的isContentEditable属性都变成了true：
document.documentElement.isContentEditable //true
document.body.isContentEditable //true
document.querySelector('#id').isContentEditable //true
2
3
user-modify
这家伙是一个CSS属性！但其功能不可小觑，是CSS版的contenteditable。
user-modify: read-only; //只读
user-modify: read-write; //读写，支持富文本
user-modify: write-only; //只写？！ 什么鬼，不知道啥意思
user-modify: read-write-plaintext-only; //读写，但只可输入文本
2
3
4
直接看张鑫旭大大的Demo吧。
注意
但这时候，isContentEditable是检测不到的该元素是否可编辑的
contenteditable
前两个属性都存在很大的缺点，designMode是针对整个document的，对于想做到模块化的编辑器的实现是很难得， user-modify的兼容性更是经不起太多的考验。
那么就只剩下contenteditable了，这是大多数浏览器都能兼容的。
contenteditable="" //与contenteditable="true"效果一样
contenteditable="events"
contenteditable="caret"
contenteditable="typing"
contenteditable="plaintext-only" //可编辑，只允许纯文本
contenteditable="true" //可编辑，支持富文本
contenteditable="false" //不可编辑
2
3
4
5
6
7
"events"、"caret"、"typing"看了半天文档也没搞清楚啥意思，而且貌似现在的浏览器也不支持。 可以自己试下：点这里。有知道的大神还望指导一下下🙏 ~
demo:
总结
只是蜻蜓点水般的介绍，具体细节没有深究。后续的文章会就与contenteditable有关的几个对象展开学习。