在线所见即所得HTML编辑器的实现原理浅析
如今网站开发越来越提倡用户体验，为用户提供便利的工具也越来越多，而在线的HTML内容编辑器应该算是其中比较“古老”的一个了。功能简单的可以为用户提供文本的样式控制，例如文字的颜色、字体大小等；而功能复杂的甚至可以提供类似Word一样的强大功能。虽然现在各种开源的编辑器非常多，但是真正好用的并不多，所以它们改进工作也一直在进行中。
如今网上多数的编辑器都有很强大的功能，相对而言，在使用中也需要很多的配置，当然代码也自然会比较“臃肿”。如果我们并不需要功能那么强大的编辑器，那么可以自己实现一个，因为代码并不复杂。下面是一点个人的经验，仅供参考（以ExtJS的HTMLEditor为例）。
1、初始化。当页面加载完毕后，向页面添加一个IFrame（可选）。这里要注意的是，要判断页面的状态，要等页面完全加载完毕后再进行操作，防止出现找不到某些元素的错误。
2、打开编辑功能。将IFrame设为可以编辑（下面代码来自ExtJS的HTMLEditor）：
//获取iframe的window对象
getWin:function(){
returnExt.isIE?this.iframe.contentWindow:window.frames[this.iframe.name];
},
//获取iframe的document对象 getDoc:function(){ returnExt.isIE?this.getWin().document:(this.iframe.contentDocument||this.getWin().document); },
//打开document对象，向其写入初始化内容，以兼容FireFox doc=this.getDoc(); doc.open(); doc.write('<html><head><mce:styletype="text/css"><!-- body{border:0;margin:0;padding:3px;height:98%;cursor:text;} --></mce:style><styletype="text/css"mce_bogus="1">body{border:0;margin:0;padding:3px;height:98%;cursor:text;}</style></head><body></body></html>'); //打开document对象编辑模式 doc.designMode="on"; doc.close();