您的位置：首页 → 网页设计 → 经验技巧 → 在线编辑器的基本实现原理？

在线编辑器的基本实现原理？

时间：2010/1/21 16:32:00来源：本站整理作者：我要评论(0)

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

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

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

      

view plaincopy to clipboardprint?
  1. // 获取iframe的window对象  
  2. getWin : function(){  
  3.         return Ext.isIE ? this.iframe.contentWindow : window.frames[this.iframe.name];  
  4.     },  
  5.   
  6. //获取iframe的document对象  
  7. getDoc : function(){  
  8.         return Ext.isIE ? this.getWin().document : (this.iframe.contentDocument || this.getWin().document);  
  9. },  
  10.   
  11. //打开document对象，向其写入初始化内容，以兼容FireFox  
  12. doc = this.getDoc();  
  13. doc.open();  
  14. doc.write('<html><head><mce:style type="text/css"><!--  
  15. body{border:0;margin:0;padding:3px;height:98%;cursor:text;}  
  16. --></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>');  
  17. //打开document对象编辑模式  
  18.  doc.designMode = "on";  
  19. doc.close();  

 

      这样就可以向这个简单那的编辑器中写入内容了。

      3、获取编辑器的内容，代码如下：

     

view plaincopy to clipboardprint?
  1. //获取编辑器的body对象  
  2. var body = doc.body || doc.documentElement;  
  3. //获取编辑器的内容  
  4. var content = body.innerHTML;  
  5. //对内容进行处理，例如替换其中的某些特殊字符等等  
  6. //Some code  
  7.   
  8. //返回内容  
  9. return content;  

 

      4、增加样式设置。上面的编辑器虽然实现了基本功能，但是实在是有些太简单了，应该增加些简单的样式实现。document的execCommand方法使这种想法成为可能。

    

view plaincopy to clipboardprint?
  1. //统一的执行命令方法  
  2. function execCmd(cmd, value){  
  3.     //doc对象的获取参照上面的代码  
  4.      //调用execCommand方法执行命令  
  5.     doc.execCommand(cmd, false, value === undefined ? null : value);  
  6. };  
  7.   
  8. //将选中字体变为黑体，Ctrl-B  
  9. execCmd('bold');  
  10. //加下划线，Ctrl-U  
  11. execCmd('underline');  
  12. //变为斜体，Ctrl-I  
  13. execCmd('italic');  
  14. //设置文字的颜色  
  15. execCmd('forecolor', Ext.isSafari || Ext.isIE ? '#'+color : color);  
  16. //在光标处插入一段内容  
  17. function insertAtCursor(text){  
  18.   //win对象的获取参考上面的代码  
  19.   if(Ext.isIE){  
  20.       win.focus();  
  21.       var r = doc.selection.createRange();  
  22.       if(r){  
  23.         r.collapse(true);  
  24.         r.pasteHTML(text);      }  
  25.     }else if(Ext.isGecko || Ext.isOpera){  
  26.       win.focus();  
  27.       execCmd('InsertHTML', text);  
  28.     }else if(Ext.isSafari){  
  29.       execCmd('InsertText', text);  
  30.     }  
  31.   }  

 

     5、再进一步。如今可以改变样式了，如果编辑器有工具栏（这应该是必然的），那么我们还想工具栏上的按钮根据光标所处位置的样式，自动处于突出或正常显示。document的queryCommandState()方法又让这种想法得以实现。

    

view plaincopy to clipboardprint?
  1. //doc对象的获取参考上面的对面  
  2. //光标处是否是粗体  
  3. var isBold = doc.queryCommandState('bold');  
  4. if(isBold){  
  5.   //改变Bold按钮的样式  
  6. }  
  7. //当然上面的代码是可以合并的，这里只不过是一个示意  
  8.   
  9.   
  10. //下划线  
  11. doc.queryCommandState('underline');  
  12. //斜体  
  13. doc.queryCommandState('italic');  

 

     本文只是为实现编辑器提供了简单的思路，其中的一些代码是可以直接使用的。建议，想自己实现编辑器的朋友可以参考下ExtJS中的HTMLEditor代码，既简单又比较清晰，可以在其上进行扩展。

     最后提醒一点：一定要注意浏览器的兼容性问题，并且不要等接近尾声了再去测试兼容性，对于这么大量的JavaScript代码，调整是比较痛苦的事情。

相关视频

    没有数据

相关阅读 最新微信编辑器哪个好 排版侠微信编辑器使用教程UnityVR编辑器荷兰亮相 UnityVR编辑器年末发布我的世界编辑器怎么用 我的世界编辑器使用教程更换96微信编辑器素材头像的方法96微信编辑器素材选择小技巧微信编辑器哪个好 3种实用微信编辑器推荐96微信编辑器使用教程微信编辑器怎么用 易点微信编辑器使用教程

文章评论
发表评论

热门文章 Wordpress本地安装教程dx1.5如何设置二级域名

最新文章 hbuilder有哪些快捷键Wordpress本地安装教程 Wordpress本地安装教程expression web 4文档乱码解决方法dz 2.5“收藏本版”关闭小对话框无法关闭解在制作安装软件之前,您必须先将易语言存盘,

人气排行 如何使用multipart/form-data格式上传文件Photoshop PS图层混合模式详解(非常详细)ISAPI_Rewrite3使用教程网站里添加收藏和设为首页代码桌面快捷方式图标不见了C#获取执行程序所在的当前路径的方法详解（XMLHttpRequest）进行跨域请求方法如何用远程桌面连接进行传输文件