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

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

如何利用js取得eWebEditor编辑器的内容相关推荐

js 获取 eWebEditor 的内容
最近想使用一个html编辑器,而我想获取的值又是通过客户端面的,想起以前使用过 eWebEditor 在线编辑器还不错, 但是以前的获取值都是在后台获得的,试过用 document.getElemen ...
ewebeditor编辑器ASP/ASPX/PHP/JSP版本漏洞利用总结及解决方法
ewebeditor编辑器ASP/ASPX/PHP/JSP版本漏洞利用总结及解决方法参考文章: (1)ewebeditor编辑器ASP/ASPX/PHP/JSP版本漏洞利用总结及解决方法 (2)ht ...
html调用一个php文件路径_HTML中利用js调用php的内容
HTML中利用js调用php的内容经常会看到很多网站的统计代码都是以js调用的形式显示的,下面我们就来看看那如何实例的吧. $countfile = "num.txt"; //定 ...
修改html中meta标签,利用JS或JQuery修改网页title和meta标签的content内容
这篇文章主要为大家详细介绍了利用JS或JQuery修改网页title和meta标签的content内容,具有一定的参考价值,感兴趣的小伙伴们可以参考一下,有需要的朋友可以收藏方便以后借鉴. 网页的ti ...
Case Study: 利用JS设计高级检索功能通过PHP获取MySQL数据
一.目标该笔记的目的是引导读者借助WampServer平台和MySQL数据库,利用HTML/CSS/JS/PHP设计一个含有高级检索功能的数据库网页.该功能效果如图1所示.用户在文本框中输入相应内容 ...
关于CKEditor4.5.6的使用，自定义toolbar配置，上传图片案例（SpringMVC+MyBatis案例），自定义行高，去编辑器的中内容，将编辑器中内容设置到指定的位置等
关于CKEditor的一个配置整理,改文件为config.js: 文件内容如下: /** * @license Copyright (c) 2003-2016, CKSource - Fred ...
KindEditor使用过程中，用JQ提交表单时，获取不到编辑器的内容
首先要说明的是,在使用提交按钮直接提交时,编辑器的内容是可以正常获取的,而使用 jq或js ,如$("#form").submit(),提交时,则编辑器的内容是无法获取的,这里在 ...
利用js的闭包原理做对象封装及调用方法
创建一个js文件,名为testClosure.js: ? 1 2 3 4 5 6 7 8 9 (function () { function a() { alert('i am a') ...
ie模式下html中的按钮失效,解决ewebeditor编辑器在IE8下按钮失效、点击后没反应的问题...
有客户反映了升级到IE8浏览器后,后台编辑器按钮失效.点击后没反应的问题.登录客户后台发现使用的是一款流行的eWebEditor编辑器,在ie8中,默认情况下,居然会无法使用ewebeditor的弹出 ...

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

如何利用js取得eWebEditor编辑器的内容相关推荐

最新文章

热门文章