tinguo002

           

          如何利用js取得eWebEditor編輯器的內(nèi)容

          原諒:http://blog.csdn.net/sunyujia/article/details/2572861

          用javascript取控件的值本來是一件簡(jiǎn)單的事卻被eWebEditor搞的很不方便,導(dǎo)致很多初學(xué)者,不知道該如何獲取。在分析之前先把我們習(xí)慣性的取值方法寫出來。
          <HTML>

          <HEAD>

          <TITLE>eWebEditor : 標(biāo)準(zhǔn)調(diào)用示例</TITLE>

          <META http-equiv=Content-Type content="text/html; charset=gb2312">

          <link rel='stylesheet' type='text/css' href='example.css'>

          <script>

              
          function validateForm(){


                  
          if(document.getElementById("content1").value!=""){

                      document.getElementById(
          "myform").submit();

                  }
          else{

                      alert(
          "");

                  }


              }


          </script>

          </HEAD>

          <BODY>

          <FORM method="post" name="myform" action="rs.jsp">

          <TABLE border="0" cellpadding="2" cellspacing="1">

          <TR>

              
          <TD>編輯內(nèi)容:</TD>

              
          <TD>

                  
          <INPUT type="hidden" name="content1" >

                  
          <IFRAME ID="eWebEditor1" src="../ewebeditor.htm?id=content1&style=coolblue" frameborder="0" scrolling="no" width="550" height="350"></IFRAME>

              
          </TD>

          </TR>

          <TR>

              
          <TD colspan=2 align=right>

              
          <INPUT type=button value="提交" onclick="validateForm()"> 

              
          <INPUT type=reset value="重填"> 

              
          <INPUT type=button value="查看源文件" onclick="location.replace('view-source:'+location)"> 

              
          </TD>

          </TR>

          </TABLE>

          </FORM>

          </BODY>

          </HTML>

          上面代碼非常簡(jiǎn)單我們一般會(huì)認(rèn)為document.getElementById("content1").value這樣就可以取值了,但事實(shí)上并不是這樣,通過這種方式取值,只能取到初始值,當(dāng)編輯器的內(nèi)容變化時(shí)是取不到的,為什么呢?為什么后臺(tái)程序可以取得到編輯器中的值呢,<%=request.getParameter("content1")%>這里是可以取到編輯器中的內(nèi)容的,但是document.getElementById("content1").value確不可以。看來eWebEditor在js中動(dòng)了手腳,一定是動(dòng)態(tài)幫定了提交事件,或動(dòng)態(tài)綁定了在源碼中搜索onsubmit找到如下代碼,原來動(dòng)態(tài)的綁定了onsubmit事件,這樣每次在提交前會(huì)執(zhí)行AttachSubmit函數(shù)

              oForm.attachEvent("onsubmit", AttachSubmit) ;

              if (! oForm.submitEditor) oForm.submitEditor = new Array() ;

              oForm.submitEditor[oForm.submitEditor.length] = AttachSubmit ;

              if (! oForm.originalSubmit) {

                  oForm.originalSubmit = oForm.submit ;

                  oForm.submit = function() {

                      if (this.submitEditor) {

                          for (var i = 0 ; i < this.submitEditor.length ; i++) {

                              this.submitEditor[i]() ;

                          }

                      }

                      this.originalSubmit() ;

                  }

              }



           

          function AttachSubmit() {

              var oForm = oLinkField.form ;

              if (!oForm) {return;}

             

              var html = getHTML();

              ContentEdit.value = html;

              if (sCurrMode=="TEXT"){

                  html = HTMLEncode(html);

              }

              splitTextField(oLinkField, html);

          }

           

           

          AttachSubmit就是copy編輯器的內(nèi)容到隱藏域控件中的過程。

          知道了過程我們的問題就不難解決了。只需在取編輯器內(nèi)容之前執(zhí)行下AttachSubmit即可



           function validateForm(){

               window.frames["eWebEditor1"].AttachSubmit();//執(zhí)行iframe頁面中的AttachSubmit函數(shù)

            if(document.getElementById("content1").value!=""){

             document.getElementById("myform").submit();

            }else{

             alert("空");

            }

           }


           整個(gè)過程就此結(jié)束,其實(shí)eWebEditor代碼中的很多思想都是很具有參考價(jià)值的例如AttachSubmit的綁定submit 方法的重新封裝,我還發(fā)現(xiàn)一段比較寫的比較好的代碼也一起貼出來。

          var URLParams = new Object() ;

          var aParams = document.location.search.substr(1).split('&') ;

          for (i=0 ; i < aParams.length ; i++) {

           var aParam = aParams[i].split('=') ;

           URLParams[aParam[0]] = aParam[1] ;

          }

           

          var sLinkFieldName = URLParams["id"] ;

          var sExtCSS = URLParams["extcss"] ;

          var sFullScreen = URLParams["fullscreen"];

           

          var config = new Object() ;

          config.StyleName = (URLParams["style"]) ? URLParams["style"].toLowerCase() : "coolblue";

          config.CusDir = URLParams["cusdir"];

          config.ServerExt = "jsp";



          解析url的方法,這種方法以前koko跟我說過一回,今天在ewebeditor中又看到了,看來是一種比較常規(guī)的分析URL參數(shù)的方法。

          總結(jié):其實(shí)eWebEditor只是修改了提交表單的兩個(gè)事件,在提交表單前進(jìn)行值copy,從而避免了編輯器每次更新都同步值這種沒有必要的操作。





          歡迎大家訪問我的個(gè)人網(wǎng)站 萌萌的IT人

          posted on 2013-11-20 21:31 一堣而安 閱讀(226) 評(píng)論(0)  編輯  收藏 所屬分類: js_css

          導(dǎo)航

          統(tǒng)計(jì)

          常用鏈接

          留言簿(1)

          隨筆分類

          隨筆檔案

          收藏夾

          搜索

          最新評(píng)論

          閱讀排行榜

          評(píng)論排行榜

          主站蜘蛛池模板: 麻城市| 金溪县| 柯坪县| 东乡| 靖州| 密山市| 大竹县| 阳信县| 阿坝| 乐平市| 安岳县| 台南县| 临湘市| 乌什县| 灵丘县| 潍坊市| 秭归县| 永平县| 洛隆县| 玛纳斯县| 古田县| 陵川县| 本溪市| 固安县| 阿拉善右旗| 绥中县| 南投县| 克什克腾旗| 湘潭县| 阿巴嘎旗| 岫岩| 微山县| 扬中市| 库车县| 曲阜市| 新晃| 福州市| 崇左市| 库尔勒市| 阳原县| 泸州市|