文章导航PC6首页软件下载单机游戏安卓资源苹果资源

pc软件新闻网络操作系统办公工具编程服务器软件评测

安卓新闻资讯应用教程刷机教程安卓游戏攻略tv资讯深度阅读综合安卓评测

苹果ios资讯苹果手机越狱备份教程美化教程ios软件教程mac教程

单机游戏角色扮演即时战略动作射击棋牌游戏体育竞技模拟经营其它游戏游戏工具

网游cf活动dnf活动lol周免英雄lol礼包

手游最新动态手游评测手游活动新游预告手游问答

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

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

时间：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）进行跨域请求方法如何用远程桌面连接进行传输文件