如何利用js取得eWebEditor编辑器的内容
2008-06-21 15:10
429 查看
用javascript取控件的值本来是一件简单的事却被eWebEditor搞的很不方便,导致很多初学者,不知道该如何获取。在分析之前先把我们习惯性的取值方法写出来。
上面代码非常简单我们一般会认为document.getElementById("content1").value这样就可以取值了,但事实上并不是这样,通过这种方式取值,只能取到初始值,当编辑器的内容变化时是取不到的,为什么呢?为什么后台程序可以取得到编辑器中的值呢,<%=request.getParameter("content1")%>这里是可以取到编辑器中的内容的,但是document.getElementById("content1").value确不可以。看来eWebEditor在js中动了手脚,一定是动态帮定了提交事件,或动态绑定了在源码中搜索onsubmit找到如下代码,原来动态的绑定了onsubmit事件,这样每次在提交前会执行AttachSubmit函数
AttachSubmit就是copy编辑器的内容到隐藏域控件中的过程。
知道了过程我们的问题就不难解决了。只需在取编辑器内容之前执行下AttachSubmit即可
整个过程就此结束,其实eWebEditor代码中的很多思想都是很具有参考价值的例如AttachSubmit的绑定submit 方法的重新封装,我还发现一段比较写的比较好的代码也一起贴出来。
解析url的方法,这种方法以前koko跟我说过一回,今天在ewebeditor中又看到了,看来是一种比较常规的分析URL参数的方法。
总结:其实eWebEditor只是修改了提交表单的两个事件,在提交表单前进行值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函数
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编辑器的内容
- Android如何利用JS来操作WebView里面的内容
- [Web]如何利用js库dom-drag.js最简单化实现移动图层和点击实现div居上问题
- 如何使IE 8 支持eWebEditorExt编辑器
- 如何用.Net 取得指定网面的内容? How to get html web page data?
- 利用eWebEditor提供的Client API实现在客户端与编辑器的交互(转自http://www.ewebeditor.net/documentation/)
- web.py如何取得提交表单的内容
- 利用编辑器漏洞ewebeditor-fckeditor-southidceditor
- 前台页面中用js取得eWebEditor的值
- js 获取 eWebEditor 的内容
- 有关ewebeditor编辑器在修改文章时内容...
- 前台页面中用js取得eWebEditor的值
- 如何利用vue-cli和webpack搭建vuejs项目
- 如何使用Javascript(简称JS)取得LI里的内容(简单易懂的代码实例)
- webdriver中利用js来向富文本框书写内容
- ewebeditor编辑器ASP/ASPX/PHP/JSP版本漏洞利用总结及解决方法
- 如何关闭WebEditor在线编辑器的远程自动上传功能http://www.jn10086.cn/boke/article.asp?id=231
- 如何解决IE8中eWebEditor编辑器按钮不能正常使用
- asp eWebEditor编辑器
- Android 中利用WebViewJavascriptBridge 实现js和java的交互