contentEditable和document.designMode的区别

contentEditable和document.designMode的区别
2011年08月24日
　　contentEditable和document.designMode的区别http://www.xiahaixia.com/2011/03/15/contenteditable%E5%92%8Cdocument-designmode%E7%9A%84%E5%8C%BA%E5%88%AB/
　　本来没打算写这篇的，但是每次被别人莫名的错误说是因为我们项目导致的，就会莫名的恼火。这年头推卸责任的人可真多，不追究根源的也不少。
　　因为document.domain的原因引起编辑器错误的产生，我脑中第一个就想到了document.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()的效果。这个问题非常要命，因为很多时候我们不希望页面初始化时焦点跳到编辑区域里。
　　所以针对以上原因建议是IE下将页面设置成可编辑状态是document.body.contentEditable = true;非IE的浏览器是document.designMode="on";
　　参考链接：http://luolonghao.javaeye.com/blog/693814
　　http://ued.alipay.com/wd/2008/11/08/js%E8%B7%A8%E5%9F%9F%E8%AE%BF%E9%97%AE%E6%93%8D%E4%BD%9Ciframe%E9%87%8C%E7%9A%84dom/