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

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

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

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

< HEAD >

< TITLE > eWebEditor : 标准调用示例 </ 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 > 编辑内容: </ 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 >

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

    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编辑器的内容到隐藏域控件中的过程。

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



 function validateForm(){

     window.frames["eWebEditor1"].AttachSubmit();//执行iframe页面中的AttachSubmit函数

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

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

  }else{

   alert("空");

  }

 }


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

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中又看到了,看来是一种比较常规的分析URL参数的方法。

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





欢迎大家访问我的个人网站 萌萌的IT人

你可能感兴趣的:(如何利用js取得eWebEditor编辑器的内容)