老杂毛博客
  青青子衿,悠悠我心。但为君故,沉吟至今。
博客首页 | 人生历程 | 编程开发 | 机关门  
  文章分类
 
博客首页 > 软件网络编程 > 文章正文

【网页编辑器开发】html在线网页编辑器开发第五讲

2011/1/4 11:58:48
 

     在前面四讲中我们把编辑器的基本功能都完善了,但是缺少了最重要的一个环节没有讲到“提交至服务器”。我们如何才能把编辑器中的内容像提交input表单一样提交至服务器呢?其实很简单,这一讲我就和大家一起来学习一下如何把我们编辑好的内容提交至服务器。

     我们都知道iframe并不是一个表单控件,不会响应按钮的submit的post提交。所以我们必须需要使用一些手段,让用户在点击按钮的时候把iframe里的内容取出来一并发往服务器。

     首先来说明一下思路:在用户提交的时候我们把iframe中的数据读取出来放到一个隐藏域中,然后这样在点击按钮的时候隐藏域中的数据就会和其它的表单一并提交到服务器了。也可以放到一个隐藏的textbox文本框中,点击按钮时一并提交数据。

设置隐藏的文本框

     我们用最常用的html表单来做实验。

#lt;textarea name="TxtContents" style="display:none"#gt;#lt;/textarea#gt;

     因为在php和jsp以及asp中,这种html表单是最常用的。若是在asp.net中请换作服务器端的TextBox文本框。

    style="display:none;"这是一句css样式,我们用这个代码限定表单的隐藏,这样在页面上用户就看不到这个文本框了。

将iframe中的数据读取到文本框中

#lt;input type="submit" name="Submit" value=" 发 布 "  onClick="document.form1.TxtContents.value = frames.message.document.body.innerHTML;"#gt;

  请注意代码中的:onClick="document.form1.TxtContents.value = frames.message.document.body.innerHTML;"这句代码,其实我们完全可以把这段代码写到一个函数中,然后在按钮的OnClick事件中去执行这个函数,但是由于这里我没有做过多的操作,所以就把这一句话直接写到了这个按钮里。

  这句话的意思是:把message这个元素中的所有数据(innerHtml是包含html代码的数据,innerText是不包含html代码的数据)赋值给from1(表单id)这个表单中TxtContents这个文本域里。

  这样我们在提交表单之前先响应了这个js代码,把iframe里面的数据得到,然后赋值给了文本框,这样提交上去之就可以像对待普通表单一样处理里面的数据了。

  注意:在asp.net中按钮是服务器端的,需要用到OnClientClick 而不是OnClick。

将文本框中的数据赋值给iframe

   刚才我们已经把iframe中的数据赋值给文本框了,那么这里又出现了另一情况。如果我们要修改文章,我们应该如何加载服务器端的数据呢。

   这里我们有两种做法,第一种做法是在iframe所包含的页面里写上服务器端代码当页面有传值进来的时候加载服务器端的内容数据显示在页面上,这样在iframe包含进来的时候就可以看到iframe编辑器里出现了需要修改的数据。

    我们不提倡第一种做法,因为这样需要读取两次数据库,而且万一我们没有被包含页面,该如何是好,所以我们采用第二种方法,一次性把需要修改的数据全部加载到页面元素上,然后用js代码将文本框中的值同步给iframe,当iframe中的数据编辑完成之后一并提交到服务器。

   定义函数:

  function  Editshow()  
  {   
  frames.message.focus();
  InfoStr=document.form1.TxtContents.value;
  frames.message.document.body.innerHTML=InfoStr;
  }  

此函数的功能就是将文本框中的数据赋值给Iframe,所以我们需要有一个触发时间,在body标记里面加上这样的代码:#lt;body onLoad="Editshow()"#gt;

  js中有一个OnLoad事件,就是在页面加载的时候执行的,也有关闭事件是在页面被关闭的时候执行的,一般很多网站弹窗就是这样做的。

  我们在页面加载的时候去执行这个函数,把数据加载到iframe这样就得到需要修改的数据了。

  原理:因为服务器再往客户端发送数据的时候,已经执行完了服务器端的代码,这样在页面加载之前其实文本框里的值已经在服务器端赋值好了,只不过没有加载到iframe中,我们只需要在页面加载的时候把值取出来放过去就好了。

OK,今天我们就解决这么一个问题,因为没有太多可以演示的东西,所以没有配图,如果哪里还有没说明白的,请大家给我留言。

我们将在下一将中讲解上传图片和一些弹出窗的功能。

如果你有不同的意见,你全是对的,文章版权没有,转载不究(老杂毛/文)

阅读: (2561)  评论(21)  
 
网友评论:
 
 1.123.234.40.2222011/1/6 10:55:12 
前几讲都不错,但是有两点我还需要请教下
1. 前几讲这个编辑器对火狐的支持不算太好,对兼容性问题怎么解决?
2. 一些表情图片如何去做
 2.whb2011/1/10 15:25:50 
真的很感谢您!文章非常得清晰透彻,只是还有个问题!编辑区域不其作用,是怎么回事?恭候你的答复!
 3.whb2011/1/10 16:14:08 
谢啦!frames.message.document.body.innerHTML的各个单词代表什么意思?我对js不熟,见笑了!
 4.whb2011/1/10 23:11:43 
谢谢啦!真的很感谢您!
 5.122.192.191.2222011/1/18 17:15:00 
大哥能不能加一个可以上传本地相片的功能呢
 6.122.194.165.2022011/1/19 14:45:58 
为什么这一篇文章没有全部代码了呢 相当期待 我的老师
 7.219.142.118.2332012/1/13 11:49:21 
能不写一个详细一点的例子,我是菜鸟,看了好久还是不知道如何实现textarea与iframe之间传内容的,谢谢
 8.2016/6/11 10:10:06 
 9.2016/6/17 15:59:22 
 10.2016/6/22 7:14:47 
 11.2016/6/26 19:00:24 
 12.2016/12/24 9:12:50 
 13.2018/1/18 21:09:19 
 14.2018/2/2 20:44:46 
 15.2018/2/19 3:59:11 
 16.2018/3/9 0:55:34 
 17.2018/3/25 19:49:30 
 18.2018/4/12 7:40:08 
 19.2018/5/11 17:08:13 
 20.2018/5/30 15:14:04 
 21.2018/7/19 20:48:33 
 
相关文章:
 微信支付asp.net V3.3.7 sys
 ERRORLOG 文件太大的处理办法
 Attempted to read or w
 Ctrl键自动按下,Ctrl键和Alt总感觉
 解决 Your project contai
 adb install 多设备id号一样,如
 如何去掉优酷,土豆等网站的广告?
 webview的loadData方法加载乱码
 让iis7支持apk文件下载
 sql利用游标循环,遍历表循环结果集
 
 
     
联系作者: QQ: 657603425 Email: [email protected]
Copyright © 2007-2014 www.laozamao.com All Rights Reserved
京ICP备09002242号 北京海淀分局备案号:1101084842