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

来源：互联网发布：中兴通开票软件编辑：程序博客网时间：2024/04/29 05:07

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

view plaincopy to clipboardprint?
<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>

<HTML>

<HEAD>

<TITLE>eWebEditor ：标准调用示例</TITLE>

function validateForm(){

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

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

}else{

alert("空");

}

</script>

</HEAD>

<BODY>

<TR>

<TD>

</TD>

</TR>

<TR>

</TD>

</TR>

</TABLE>

</FORM>

</BODY>

</HTML>

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

view plaincopy to clipboardprint?
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() ;

    }

}

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

}

    }view plaincopy to clipboardprint?

function AttachSubmit() {

    var oForm = oLinkField.form ;

    if (!oForm) {return;}



    var html = getHTML();

    ContentEdit.value = html;

    if (sCurrMode=="TEXT"){

        html = HTMLEncode(html);

    }

    splitTextField(oLinkField, html);

}

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即可

view plaincopy to clipboardprint?
function validateForm(){

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

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

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

    }else{

        alert("空");

    }

}

function validateForm(){

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

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

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

}else{

alert("空");

}

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

view plaincopy to clipboardprint?
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";

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，从而避免了编辑器每次更新都同步值这种没有必要的操作。

原文网址：http://blog.csdn.net/sunyujia/archive/2008/06/21/2572861.aspx