首頁 > php教程 > PHP源码 > 如何利用js取得eWebEditor编辑器的内容

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

PHP中文网
發布: 2016-05-25 17:11:51
原創
1569 人瀏覽過

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

<HTML>  
  
<HEAD>  
  
<TITLE>eWebEditor : 标准调用示例</TITLE>  
  
<META http-equiv=Content-Type content="text/html; charset=gb2312">  
  
<link rel=&#39;stylesheet&#39; type=&#39;text/css&#39; href=&#39;example.css&#39;>  
  
<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(&#39;view-source:&#39;+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() ;  
  
    }  
  
}
登入後複製

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

知道了过程我们的问题就不难解决了。只需在取编辑器内容之前执行下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(&#39;&&#39;) ;  
  
for (i=0 ; i < aParams.length ; i++) {  
  
    var aParam = aParams[i].split(&#39;=&#39;) ;  
  
    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,从而避免了编辑器每次更新都同步值这种没有必要的操作。

以上就是 如何利用js取得eWebEditor编辑器的内容 的内容,更多相关内容请关注PHP中文网(www.php.cn)!


相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
作者最新文章
最新問題
熱門推薦
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板