码迷，mamicode.com
首页 > Web开发 > 详细

如何利用js取得eWebEditor编辑器的内容

时间：2014-10-10 18:34:44      阅读：249      评论：0      收藏：0      [点我收藏+]

标签：style   blog   http   io   os   ar   java   for   文件   

用javascript取控件的值本来是一件简单的事却被eWebEditor搞的很不方便，导致很多初学者，不知道该如何获取。在分析之前先把我们习惯性的取值方法写出来。

[html] view plain copy
  1. <HTML>  
  2.   
  3. <HEAD>  
  4.   
  5. <TITLE>eWebEditor ： 标准调用示例</TITLE>  
  6.   
  7. <META http-equiv=Content-Type content="text/html; charset=gb2312">  
  8.   
  9. <link rel=‘stylesheet‘ type=‘text/css‘ href=‘example.css‘>  
  10.   
  11. <script>  
  12.   
  13.     function validateForm(){  
  14.   
  15.   
  16.         if(document.getElementById("content1").value!=""){  
  17.   
  18.             document.getElementById("myform").submit();  
  19.   
  20.         }else{  
  21.   
  22.             alert("空");  
  23.   
  24.         }  
  25.   
  26.     }  
  27.   
  28. </script>  
  29.   
  30. </HEAD>  
  31.   
  32. <BODY>  
  33.   
  34. <FORM method="post" name="myform" action="rs.jsp">  
  35.   
  36. <TABLE border="0" cellpadding="2" cellspacing="1">  
  37.   
  38. <TR>  
  39.   
  40.     <TD>编辑内容：</TD>  
  41.   
  42.     <TD>  
  43.   
  44.         <INPUT type="hidden" name="content1" >  
  45.   
  46.         <IFRAME ID="eWebEditor1" src="../ewebeditor.htm?id=content1&style=coolblue" frameborder="0" scrolling="no" width="550" height="350"></IFRAME>  
  47.   
  48.     </TD>  
  49.   
  50. </TR>  
  51.   
  52. <TR>  
  53.   
  54.     <TD colspan=2 align=right>  
  55.   
  56.     <INPUT type=button value="提交" onclick="validateForm()">   
  57.   
  58.     <INPUT type=reset value="重填">   
  59.   
  60.     <INPUT type=button value="查看源文件" onclick="location.replace(‘view-source:‘+location)">   
  61.   
  62.     </TD>  
  63.   
  64. </TR>  
  65.   
  66. </TABLE>  
  67.   
  68. </FORM>  
  69.   
  70. </BODY>  
  71.   
  72. </HTML>  

 

上面代码非常简单我们一般会认为document.getElementById("content1").value这样就可以取值了，但事实上 并不是这样，通过这种方式取值，只能取到初始值，当编辑器的内容变化时是取不到的，为什么呢？为什么后台程序可以取得到编辑器中的值 呢，<%=request.getParameter("content1")%>这里是可以取到编辑器中的内容的，但是 document.getElementById("content1").value确不可以。看来eWebEditor在js中动了手脚，一定是动态 帮定了提交事件，或动态绑定了在源码中搜索onsubmit找到如下代码，原来动态的绑定了onsubmit事件，这样每次在提交前会执行 AttachSubmit函数

[jscript] view plain copy
  1. oForm.attachEvent("onsubmit", AttachSubmit) ;  
  2.   
  3. if (! oForm.submitEditor) oForm.submitEditor = new Array() ;  
  4.   
  5. oForm.submitEditor[oForm.submitEditor.length] = AttachSubmit ;  
  6.   
  7. if (! oForm.originalSubmit) {  
  8.   
  9.     oForm.originalSubmit = oForm.submit ;  
  10.   
  11.     oForm.submit = function() {  
  12.   
  13.         if (this.submitEditor) {  
  14.   
  15.             for (var i = 0 ; i < this.submitEditor.length ; i++) {  
  16.   
  17.                 this.submitEditor[i]() ;  
  18.   
  19.             }  
  20.   
  21.         }  
  22.   
  23.         this.originalSubmit() ;  
  24.   
  25.     }  
  26.   
  27. }  
[jscript] view plain copy
  1. function AttachSubmit() {   
  2.   
  3.     var oForm = oLinkField.form ;  
  4.   
  5.     if (!oForm) {return;}  
  6.   
  7.       
  8.   
  9.     var html = getHTML();  
  10.   
  11.     ContentEdit.value = html;  
  12.   
  13.     if (sCurrMode=="TEXT"){  
  14.   
  15.         html = HTMLEncode(html);  
  16.   
  17.     }  
  18.   
  19.     splitTextField(oLinkField, html);  
  20.   
  21. }  

AttachSubmit就是copy编辑器的内容到隐藏域控件中的过程。

知道了过程我们的问题就不难解决了。只需在取编辑器内容之前执行下AttachSubmit即可

[jscript] view plain copy
  1. function validateForm(){  
  2.   
  3.     window.frames["eWebEditor1"].AttachSubmit();//执行iframe页面中的AttachSubmit函数  
  4.   
  5.     if(document.getElementById("content1").value!=""){  
  6.   
  7.         document.getElementById("myform").submit();  
  8.   
  9.     }else{  
  10.   
  11.         alert("空");  
  12.   
  13.     }  
  14.   
  15. }  

 整个过程就此结束，其实eWebEditor代码中的很多思想都是很具有参考价值的例如AttachSubmit的绑定submit 方法的重新封装，我还发现一段比较写的比较好的代码也一起贴出来。

[jscript] view plain copy
  1. var URLParams = new Object() ;  
  2.   
  3. var aParams = document.location.search.substr(1).split(‘&‘) ;  
  4.   
  5. for (i=0 ; i < aParams.length ; i++) {  
  6.   
  7.     var aParam = aParams[i].split(‘=‘) ;  
  8.   
  9.     URLParams[aParam[0]] = aParam[1] ;  
  10.   
  11. }  
  12.   
  13.   
  14.   
  15. var sLinkFieldName = URLParams["id"] ;  
  16.   
  17. var sExtCSS = URLParams["extcss"] ;  
  18.   
  19. var sFullScreen = URLParams["fullscreen"];  
  20.   
  21.   
  22.   
  23. var config = new Object() ;  
  24.   
  25. config.StyleName = (URLParams["style"]) ? URLParams["style"].toLowerCase() : "coolblue";  
  26.   
  27. config.CusDir = URLParams["cusdir"];  
  28.   
  29. config.ServerExt = "jsp";  

 

解析url的方法，这种方法以前koko跟我说过一回，今天在ewebeditor中又看到了，看来是一种比较常规的分析URL参数的方法。

总结：其实eWebEditor只是修改了提交表单的两个事件，在提交表单前进行值copy，从而避免了编辑器每次更新都同步值这种没有必要的操作。

如何利用js取得eWebEditor编辑器的内容

标签：style   blog   http   io   os   ar   java   for   文件   

原文地址：http://my.oschina.net/ind/blog/325757
踩
(0)
赞
(0)
   
举报
评论 一句话评论（0）
登录后才能评论！
分享档案
更多>
2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)
周排行
mamicode.com排行更多图片
更多
友情链接
兰亭集智   国之画   百度统计   站长统计   阿里云   chrome插件   新版天听网
关于我们 - 联系我们 - 留言反馈
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码！