富文本编辑器 之 外框选择

添加 contenteditable 属性为 true 的 div。
contenteditable 这个属性连低版本的 ie 都支持，QQ 空间的心情发布框就是带有此属性的 div，因此我们可以想到用类似的方法做 RTE，但是本文介绍的这个 RTE 并不是利用 div 制作的，为什么？1. 当前文档的行为不会影响 iframe 中的元素。也就是说，当前页面定义的样式和 js 操作，对 iframe 中相同类名的元素是无效的。2. 对于文档操作，js 提供了一套现成的 execCommand 方法。倘若我们用 div 来开发 RTE，在没有现成方法的基础，那么就需要先提取选中的文字，可以参见我之前写的文字选中分享到” 简单实现，然后再对选中的文字对象做处理，处理完后再获取光标位置，最后插入到对应的位置，这当中所涉及到的方法兼容性都一塌糊涂，而且方法名都很长，谁搞谁知道。

设置了 designMode 为”on” 的 iframe。
目前用得最多、兼容性最好的还是 iframe 方式，使用 iframe 作为内容编辑区域。在网页中插入 iframe，那么 iframe 就可以看做是一个单独的文档，我们再把 iframe 的 designMode 属性设置为 on，结合 js 提供的 execCommand 方法。即可在这个文档中实现编辑、插入等设置功能，这也是本篇所要说的。

名字叫contr，取自保形变换之意。