前端可视化编辑的关键是啥？html两个属性：contenteditable和designMode
需求场景描述
web前端的程序员，富文本编辑器很常见，可视化编辑也听说过不少？那么有没有好奇过实现网页可编辑，实现可视化编辑的关键技术可能是啥？
我遇到一个需求，就是在一个富文本插件上，增加一个功能，就是可视化编辑。大概是实现，不用input类的表单组件，实现h1标题可编辑，一段文字p可编辑，即是在页面，所见即所得，所写即所得。
我认为HTML的两个属性contenteditable和designMode，可能是网页或网页元素可视化编辑的关键，接下来逐一认识下。
先看下Demo效果：
认识contenteditable和designMode
① contenteditable：
是一个枚举属性，表示元素是否可被用户编辑。 如果可以，浏览器会修改元素的部件以允许编辑。可通过设置为true/false 设定元素是否可编辑。例如：
<p contenteditable="true">这人一篇可编辑的文章</p>
注意事项
1.ontenteditable属性是可以被继承的，这意味着，我们如果将body的ontenteditable设置为true，那么整个body的子元素都是可编辑的。
2.ontenteditable属性是一个枚举属性，而不是一个Boolean值。这的意思是我们必须显式设置它的值为 true、false 或空字符串中的一个。
错误的写法
<label contenteditable>这种简写是无效的</label>
正确的写法
<label contenteditable="true">这是有效的写法，必须写明其值，枚举列出了true、false为其有效值</label>
② designMode：
document.designMode 控制整个文档是否可编辑。有效值为 "on" 和 "off" 。根据规范，该属性默认为 "off" 。Firefox 遵循此标准。早期版本的 Chrome 和 IE默认为 "inherit" 。从 Chrome 43 开始，默认值为 "off" ，并且不再支持 "inherit"。在 IE6 到 IE10 中，该值为大写。
designMode：on/off 设置文档对象是否（例如iframe）可编辑。
设置一个普通文档的用法
document.designMode = "on" || "off";
设置一个iframe的用法
<iframe id="iframe" src="./iiframe-edit.html"></iframe>
onst iframe = document.getElementById("iframe");
iframe.contentDocument.designMode = "on";
注意，这种直接在iframe标签上给designMode赋值的写法是无效的
<iframe id="iframe" designMode = "on" src="./iiframe-edit.html"></iframe>
