在线编辑器的基本实现原理
来源:互联网 发布:大数据整体解决方案 编辑:程序博客网 时间:2024/05/19 02:22
如今网站开发越来越提倡用户体验,为用户提供便利的工具也越来越多,而在线的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('<html><head><mce:style type="text/css"><!--
- body{border:0;margin:0;padding:3px;height:98%;cursor:text;}
- --></mce:style><style type="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();
这样就可以向这个简单那的编辑器中写入内容了。
3、获取编辑器的内容,代码如下:
- //获取编辑器的body对象
- var body = doc.body || doc.documentElement;
- //获取编辑器的内容
- var content = body.innerHTML;
- //对内容进行处理,例如替换其中的某些特殊字符等等
- //Some code
- //返回内容
- return content;
4、增加样式设置。上面的编辑器虽然实现了基本功能,但是实在是有些太简单了,应该增加些简单的样式实现。document的execCommand方法使这种想法成为可能。
- //统一的执行命令方法
- function execCmd(cmd, value){
- //doc对象的获取参照上面的代码
- //调用execCommand方法执行命令
- doc.execCommand(cmd, false, value === undefined ? null : value);
- };
- //将选中字体变为黑体,Ctrl-B
- execCmd('bold');
- //加下划线,Ctrl-U
- execCmd('underline');
- //变为斜体,Ctrl-I
- execCmd('italic');
- //设置文字的颜色
- execCmd('forecolor', Ext.isSafari || Ext.isIE ? '#'+color : color);
- //在光标处插入一段内容
- function insertAtCursor(text){
- //win对象的获取参考上面的代码
- if(Ext.isIE){
- win.focus();
- var r = doc.selection.createRange();
- if(r){
- r.collapse(true);
- r.pasteHTML(text); }
- }else if(Ext.isGecko || Ext.isOpera){
- win.focus();
- execCmd('InsertHTML', text);
- }else if(Ext.isSafari){
- execCmd('InsertText', text);
- }
- }
5、再进一步。如今可以改变样式了,如果编辑器有工具栏(这应该是必然的),那么我们还想工具栏上的按钮根据光标所处位置的样式,自动处于突出或正常显示。document的queryCommandState()方法又让这种想法得以实现。
- //doc对象的获取参考上面的对面
- //光标处是否是粗体
- var isBold = doc.queryCommandState('bold');
- if(isBold){
- //改变Bold按钮的样式
- }
- //当然上面的代码是可以合并的,这里只不过是一个示意
- //下划线
- doc.queryCommandState('underline');
- //斜体
- doc.queryCommandState('italic');
本文只是为实现编辑器提供了简单的思路,其中的一些代码是可以直接使用的。建议,想自己实现编辑器的朋友可以参考下ExtJS中的HTMLEditor代码,既简单又比较清晰,可以在其上进行扩展。
最后提醒一点:一定要注意浏览器的兼容性问题,并且不要等接近尾声了再去测试兼容性,对于这么大量的JavaScript代码,调整是比较痛苦的事情。
- 在线编辑器的基本实现原理
- 在线编辑器的基本实现原理
- 以HTMLEditor为例讲解在线编辑器的基本实现原理
- 在线文本编辑器实现原理
- 在线代码编辑器的实现原理与思路探讨?
- HTML在线文本编辑器实现原理
- PDF在线编辑器的实现
- 在线编辑器原理
- 在线编辑器原理[转]
- 在线编辑器原理
- 在线编辑器原理
- 在线HTML编辑器原理
- 在线编辑器原理
- HTML在线编辑器原理
- 在线编辑器实现原理(兼容IE和FireFox)
- 在线编辑器实现原理(兼容IE和FireFox)
- 一个文章在线编辑器的实现
- HTML在线编辑器原理研究
- How to get information of .a/.so
- c++ builder选择文件夹
- GWY后感
- 把ERP家庭化 - 理解ERP
- OpenGL 配置
- 在线编辑器的基本实现原理
- 数码照片冲洗前注意
- AMF3
- 委托的例子
- ARM处理器的分散加载及特殊应用研究
- javascript操作DOM
- ocs号码规则
- 分享一些主流网站架构的PPT、PDF
- JBPM4 使用中碰到的一些问题