在线所见即所得HTML编辑器的实现原理浅析

前端之家收集整理的这篇文章主要介绍了在线所见即所得HTML编辑器的实现原理浅析前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

如今网站开发越来越提倡用户体验,为用户提供便利的工具也越来越多,而在线的HTML内容编辑器应该算是其中比较“古老”的一个了。功能简单的可以为用户提供文本的样式控制,例如文字的颜色、字体大小等;而功能复杂的甚至可以提供类似Word一样的强大功能。虽然现在各种开源的编辑器非常多,但是真正好用的并不多,所以它们改进工作也一直在进行中。

如今网上多数的编辑器都有很强大的功能,相对而言,在使用中也需要很多的配置,当然代码也自然会比较“臃肿”。如果我们并不需要功能那么强大的编辑器,那么可以自己实现一个,因为代码并不复杂。下面是一点个人的经验,仅供参考(以ExtJS的HTMLEditor为例)。

1、初始化。当页面加载完毕后,向页面添加一个IFrame(可选)。这里要注意的是,要判断页面的状态,要等页面完全加载完毕后再进行操作,防止出现找不到某些元素的错误

2、打开编辑功能。将IFrame设为可以编辑(下面代码来自ExtJS的HTMLEditor):

代码如下:
获取iframe的window对象 getWin : function(){ return Ext.isIE ? this.iframe.contentWindow : window.frames[this.iframe.name]; },

//获取iframe的document对象 getDoc : function(){ return Ext.isIE ? this.getWin().document : (this.iframe.contentDocument || this.getWin().document); },

//打开document对象,向其写入初始化内容,以兼容FireFox doc = this.getDoc(); doc.open(); doc.write('