【HTML】designMode 与 contentEditable 介绍及区别

document.designMode 属性设置或返回文档是否可编辑

document.designMode 控制整个文档是否可编辑。有效值为 "on" 和 "off" 。根据规范，该属性默认为 "off" 。Firefox 遵循此标准。早期版本的 Chrome 和 IE 默认为 "inherit" 。从 Chrome 43 开始，默认值为 "off" ，并且不再支持 "inherit"。在 IE6 到 IE10 中，该值为大写。

将文档设置为设计模式，要将整个文档设置为设计模式，可以对文档对象本身设置 designMode 属性。当文档处于设计模式时，将不运行脚本。这样，似乎在文档内设置一个按钮来打开或关闭设计模式是个好注意，但这样做没有作用。当用户打开它后，它将保持在设计模式状态。当他们下次单击此按钮时，它将被选定而不是被单击，他们再次单击它，将能够编辑它的值。这就是为什么如果要使用设计模式最好对框架或 IFrame 中的文档设置 designMode 属性的原因。

document.designMode = 'on|off'
// 参数： off（默认值。 该文档不可编辑） on（该文档是可编辑的）

当参数设置为 on，此时文档是可编辑状态，可对文档中的内容进行修改

文档默认 designMode 值为 off

contentEditable 和 designMode 的区别

实现可视化编辑，可以使用 contentEditable 和 designMode 两种方法。contentEditable 刚开始在 IE 上实现，后来各大浏览器陆续支持 contentEditable，HTML5 标准也包含 contentEditable。designMode 只能把 document 整体改成可编辑状态，但 contentEditable 可以把任何 HTML 元素改成可编辑状态，应用范围比 designMode 广，用 contentEditable 是将来的趋势。

但在 IE 上 designMode 和 contentEditable 不完全一样，有不少细微的差距，我们开发可视化编辑器时需要格外注意。

1. 在 IE 上使用 designMode，调用 document.domain 将报没有权限的错误，用 contentEditable 没有此问题。
2. 在 IE 上使用 designMode，右键菜单没有复制、粘贴功能，出来的是普通网页的右键菜单。
3. 在 IE6 和 IE7 上使用 contentEditable，在某些情况下焦点自动移动到编辑区域，类似 focus()的效果。这个问题非常要命，因为很多时候我们不希望页面初始化时焦点跳到编辑区域里。