用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="提交" οnclick="validateForm()">
<INPUT type=reset value="重填">
<INPUT type=button value="查看源文件" οnclick="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,從而避免了編輯器每次更新都同步值這種沒有必要的操作。