首页 > 代码库 > 如何利用js取得eWebEditor编辑器的内容

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

2024-07-26 10:47:32   220人阅读

用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编辑器的内容


联系
我们