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

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

[html]
view plain
copy

  1. <HTML>
  2. <HEAD>
  3. <TITLE>eWebEditor ： 标准调用示例</TITLE>
  4. <META http-equiv=Content-Type content="text/html; charset=gb2312">
  5. <link rel=‘stylesheet‘ type=‘text/css‘ href=‘example.css‘>
  6. <script>
  7. function validateForm(){
  8. if(document.getElementById("content1").value!=""){
  9. document.getElementById("myform").submit();
  10. }else{
  11. alert("空");
  12. }
  13. }
  14. </script>
  15. </HEAD>
  16. <BODY>
  17. <FORM method="post" name="myform" action="rs.jsp">
  18. <TABLE border="0" cellpadding="2" cellspacing="1">
  19. <TR>
  20. <TD>编辑内容：</TD>
  21. <TD>
  22. <INPUT type="hidden" name="content1" >
  23. <IFRAME ID="eWebEditor1" src="../ewebeditor.htm?id=content1&style=coolblue" frameborder="0" scrolling="no" width="550" height="350"></IFRAME>
  24. </TD>
  25. </TR>
  26. <TR>
  27. <TD colspan=2 align=right>
  28. <INPUT type=button value="提交" onclick="validateForm()">
  29. <INPUT type=reset value="重填">
  30. <INPUT type=button value="查看源文件" onclick="location.replace(‘view-source:‘+location)">
  31. </TD>
  32. </TR>
  33. </TABLE>
  34. </FORM>
  35. </BODY>
  36. </HTML>

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

[jscript]
view plain
copy

  1. oForm.attachEvent("onsubmit", AttachSubmit) ;
  2. if (! oForm.submitEditor) oForm.submitEditor = new Array() ;
  3. oForm.submitEditor[oForm.submitEditor.length] = AttachSubmit ;
  4. if (! oForm.originalSubmit) {
  5. oForm.originalSubmit = oForm.submit ;
  6. oForm.submit = function() {
  7. if (this.submitEditor) {
  8. for (var i = 0 ; i < this.submitEditor.length ; i++) {
  9. this.submitEditor[i]() ;
  10. }
  11. }
  12. this.originalSubmit() ;
  13. }
  14. }

[jscript]
view plain
copy

  1. function AttachSubmit() {
  2. var oForm = oLinkField.form ;
  3. if (!oForm) {return;}
  4. var html = getHTML();
  5. ContentEdit.value = html;
  6. if (sCurrMode=="TEXT"){
  7. html = HTMLEncode(html);
  8. }
  9. splitTextField(oLinkField, html);
  10. }

AttachSubmit就是copy编辑器的内容到隐藏域控件中的过程。

知道了过程我们的问题就不难解决了。只需在取编辑器内容之前执行下AttachSubmit即可

[jscript]
view plain
copy

  1. function validateForm(){
  2. window.frames["eWebEditor1"].AttachSubmit();//执行iframe页面中的AttachSubmit函数
  3. if(document.getElementById("content1").value!=""){
  4. document.getElementById("myform").submit();
  5. }else{
  6. alert("空");
  7. }
  8. }

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

[jscript]
view plain
copy

  1. var URLParams = new Object() ;
  2. var aParams = document.location.search.substr(1).split(‘&‘) ;
  3. for (i=0 ; i < aParams.length ; i++) {
  4. var aParam = aParams[i].split(‘=‘) ;
  5. URLParams[aParam[0]] = aParam[1] ;
  6. }
  7. var sLinkFieldName = URLParams["id"] ;
  8. var sExtCSS = URLParams["extcss"] ;
  9. var sFullScreen = URLParams["fullscreen"];
  10. var config = new Object() ;
  11. config.StyleName = (URLParams["style"]) ? URLParams["style"].toLowerCase() : "coolblue";
  12. config.CusDir = URLParams["cusdir"];
  13. config.ServerExt = "jsp";

解析url的方法，这种方法以前koko跟我说过一回，今天在ewebeditor中又看到了，看来是一种比较常规的分析URL参数的方法。

总结：其实eWebEditor只是修改了提交表单的两个事件，在提交表单前进行值copy，从而避免了编辑器每次更新都同步值这种没有必要的操作。

时间： 2024-11-13 06:42:22

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

JS及JQuery对Html内容编码,Html转义

/** JQuery Html Encoding.Decoding * 原理是利用JQuery自带的html()和text()函数可以转义Html字符 * 虚拟一个Div通过赋值和取值来得到想要的Html编码或者解码 */ <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script> <script type="text/javascript"> //Ht

KindEditor使用过程中，用JQ提交表单时，获取不到编辑器的内容

首先要说明的是.在使用提交button直接提交时.编辑器的内容是能够正常获取的,而使用 jq或js ,如$("#form").submit(),提交时,则编辑器的内容是无法获取的.这里在 kindEditor官方中提出的解决方式为: 在编辑器创建时,添加属性:afterBlur:function(){this.sync();} 这里看一个完整的实例: var editor; KindEditor.ready(function(K) { editor = K.create('textar

利用JavaScript获取页面文档内容

JavaScript的document对象包含了页面的实际内容,所以利用document对象可以获取页面内容,例如页面标题.各个表单值. 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>js基础</title> 6 7 </head> 8 9 <body> 10

利用js闭包获取索引号

以tab选项卡效果为例: 网页中的选项卡效果 如图. 在鼠标点击规则标题的时候下面内容就会切换成规则的内容,这就是一个选项卡切换效果了. 标题和其内容是一一对应的. 在点击的时候就需要得到当前点击的索引号,用jquery的话可以直接通过.index()获取当时元素的索引值,那么用js呢?下面我们来利用js的闭包来实现获取索引. 页面代码如下: <!DOCTYPE html><html lang="en"><head>    <meta char

利用JS和CSS的覆盖特性来解决文件冲突问题

随着项目规模的增大,协作开发也越来越长见,协作开发时间久了就会遇到一个恶心的文件冲突问题. 假设一个HTML文件引用了两个外部JS文件,而这两个外部JS文件你没有修改的权限,你只有HTML文件的修改权限, 两个外部JS文件都定义了window.onload事件.代码假设如下: <script type="text/javascript" src="a.js"></script> <script type="text/javas

利用JS提交表单的几种方法和验证(必看篇)

第一种方式:表单提交,在form标签中增加onsubmit事件来判断表单提交是否成功 ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 <script type="text/javascript">    function validate(obj) {     if (confirm("提交表单?")) {       alert(obj.value);       return true;     }

浅谈移动端的自适应问题——响应式、rem/em、利用Js动态实现移动端自适应

随着3G的普及,越来越多的人使用手机上网.移动设备正超过桌面设备,成为访问互联网的最常见终端.于是,网页设计师不得不面对一个难题:如何才能在不同大小的设备上呈现同样的网页?本篇文章将讲述自适应网页设计的概念和方法,使网页开发人员维护同一个网页代码,即可使网站在多种设备上具有更好的阅读体验.本文详细介绍了自适应网页的实现方法,希望能给迷惑的你带来帮助. 一. 在HTML的头部加入meta标签 在HTML的头部,也就是head标签中增加meta标签,告诉浏览器网页宽度等于设备屏幕宽度,且不进行缩放,

利用JS实现闪烁字体

以下为在JSP文件中,利用JS实现闪烁字体的代码: HTML代码: 1 <div id="blink">一段会闪烁的字</div> JavaScript代码: 1 <script type="text/javascript"> 2 function changeColor() { 3 var color="#f00|#0f0|#00f|#880|#808|#088|yellow|green|blue|gray"

JS来推断文本框内容改变事件

   oninput,onpropertychange,onchange的使用方法 onchange触发事件必须满足两个条件: a)当前对象属性改变,而且是由键盘或鼠标事件激发的(脚本触发无效) b)当前对象失去焦点(onblur):    onpropertychange的话,仅仅要当前对象属性发生改变,都会触发事件,可是它是IE专属的: oninput是onpropertychange的非IE浏览器版本号,支持firefox和opera等浏览器,但有一点不同,它绑定于对象时,并不是该对象全部