如何利用js取得eWebEditor編輯器的內容

時間 2019-11-08

標籤如何利用取得 ewebeditor 編輯器內容欄目 JavaScript 简体版

原文原文鏈接

用javascript取控件的值原本是一件簡單的事卻被eWebEditor搞的很不方便，致使不少初學者，不知道該如何獲取。在分析以前先把咱們習慣性的取值方法寫出來。 javascript

[html] view plain copy

<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函數 css

[jscript] view plain copy

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() ;
}
}

[jscript] view plain copy

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編輯器的內容到隱藏域控件中的過程。 html

知道了過程咱們的問題就不難解決了。只需在取編輯器內容以前執行下AttachSubmit便可 java

[jscript] view plain copy

function validateForm(){
window.frames["eWebEditor1"].AttachSubmit();//執行iframe頁面中的AttachSubmit函數
if(document.getElementById("content1").value!=""){
document.getElementById("myform").submit();
}else{
alert("空");
}
}

整個過程就此結束，其實eWebEditor代碼中的不少思想都是很具備參考價值的例如AttachSubmit的綁定submit 方法的從新封裝，我還發現一段比較寫的比較好的代碼也一塊兒貼出來。 web

[jscript] view plain copy

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";