关于论坛发帖中所见即所得功能实现的讲解(辛辛苦苦写的大家有兴趣的看一下)
dx_andy
|
1#
发表于2007-08-25
关于论坛发帖中所见即所得功能实现的讲解(辛辛苦苦写的大家有兴趣的看一下)
//标题：关于论坛发帖中所见即所得功能的实现
//作者：dx_andy //时间：2007.8.24 晚-------2007.8.25 早 //测试环境：win32 apache2.2.4 php5.2.1 mysql5.0.27 //联系：QQ:45665758 E-mail:[email protected] 先说一下所见即所得的实现原理吧： 相信有很多人都想过或尝试的写过一个实现此功能的程序。成功了当然好了，不成功那也不要伤心，起码自己做过，多少会有些心得。 下面我说一下为什么有的人会失败，这也就是本程序的实现原理了： 这个功能一般在论坛发言区多见，它首先向人们介绍了这个功能，但是同时又把很多初学者带入一个误区。好多初学者认为图片即时显示是把图片插在了<textarea>元素中。其实不是这样的，所见即所得模式其实用到的是一个<div>层或是一个<iframe>。 (本程序用<div>,因为<iframe>方式不会呀。我想它也是基于<div>的，不知大家怎么想，有不同见解可以联系我。对了,<textarea>中也可插入图片，但要想在光标位置插入图片很难,不再研究)。 Code模式用到的就是简单的<textarea>，这里就不再讲述，大家一定都会。 好了，马上开始吧，咱们不说费话。 1，建立一个表格 <table border=0 width=600 align=center> <tr> <td colspan=2><input type=button value=”Code模式”> <input type=button value=”所见即所得模式”></td> </tr> <tr> <td id=editor><!—这里是编辑器区--></td><td id=face valign=top><!—这里是表情的图片--></td> </tr> <tr> <td colspan=2 id=submit><!—这里放提交按扭--></td> </tr> </table> 2,为了页面美观一些，简单写一个样式表，加在<head>与</head>之间 <style type=’text/css’> td,div{font-size:10pt;padding:0;} </style> 3,然后就到了我们的javascript代码区了。 （唉，想起来就头痛，简简单单的几行代码，害我调试了一晚上都没弄好，结果早上发现了有一行代码少写了一个字母，真是气我全身毛都起来了。唉，总体感受：这个JS怎么比PHP还要难呀！！！） 把上面代码写好后，浏览一下。发现怎么只有两个按钮呀，又没有输入框，又没有表情图片。呵呵，不要着急。输入框和表情图片看完下面两行代码就出来了。 将下面代码加在<head>与</head>之间： <script language=”javascript”> //div输入框的显示代码（不要怕多，认真看，本人已经优化，相当简单） Function div_edit() { //html变量保存的是一个div输入框（contenteditable=true 默认为false）。Onclick,和onkeyup所触发的事件下面会说到 html='<div id=divedit contenteditable=true style="width:430px; height:300px; border:1px #456 solid;" onclick="pos()" onkeyup="pos()"></div>'; editor.innerHTML=html; //这里在id=editor单元格中添加html中的代码 //这里是div方式的提交代码。 submit_html='<form name=fm method=post action=me.php><input type=hidden name=divinity value=1><div style="display:none"><textarea name=content></textarea></div></form><br><input type=button value=" 提交 " onclick="document.all.fm.submit()">'; submit.innerHTML=submit_html; //这里在id=submit单元格中添加submit_html中的代码 //这里是表情图片了 face_html='<table width=145><tr><td height=25><img src="face/01.gif" onclick=div_insert("01")></td><td><img src="face/02.gif" onclick=div_insert("02")></td></table>'; face.innerHTML=face_html; //这里在id=face单元格中添加face_html代码。 } </script> div_edit()函数就写完了，看着代码不少，其实用到的知识并不多。最重要的就是id.innerHTML方法，所实现的功能大概可说为：在id元素间添加HTML代码。大家看一下javascript手册就会明白。 然后把上面编写的div_edit()函数放到“所见即所得按钮”的onclick事件中：onlick=div_edit()。这样你在浏览一下，按一个这个按钮是不是有输入框和表情了。 下面把code模式的代码发出来，就不再讲解了。 function text_edit() { html='<form name=fm method=post action=me.php><input type=hidden name=textinit value=1><textarea style="width:430px; height:300px; border:1px #456 solid;" name=content onclick="pos()" onkeyup="pos()"></textarea></form>'; editor.innerHTML=html; submit_html='<input type=button value=" 提交 " onclick="document.all.fm.submit()">'; submit.innerHTML=submit_html; face_html='<table width=145><tr><td height=25><img src="face/01.gif" onclick=text_insert("[01]")></td><td><img src="face/02.gif" onclick=text_insert("[02]")></td></table>'; face.innerHTML=face_html; } 在”code模式”中添加此函数：onclick=text_edit()。 把上面的写完，浏览一下，看点一下相应的模式是不是都有了，呵呵！ 《《《《《特别声明》》》》》：下面是核心内容，大家认真看哦!!!! //获得光标所在位置的方法,Pos变量将得到光标所在位置的信息 (div_edit()函数中div层和text_edit()函数中<textarea>中onclick和onkeyup触发的命令即是此函数) function pos() { Pos=document.selection.createRange(); } //当前为”code模式” 时光标位置插入数据的函数,这是一个带参数的函数，txt参数为表情图片表示成的字符，例：表情一我是这样表示的：[01] //此函数加在text_edit()函数中表情的代码里事件为：onclick function text_insert(txt) { if(Pos && txt) { Pos.text=txt; //在光标位置插入txt字符 Pos.collapse(true); //下面两个是显示光标的方法 Pos.select(); } //当前为”所见即所得模式”时光标位置插入表情的方法（即时显示哦）。url参数为表情图片的文件名(不包括扩展名)，例：表情一，url=”01”; ////此函数加在div_edit()函数中表情的代码里事件为：onclick function div_insert(url) { if(Pos && url) { img="<img src='face/"+url+".gif' align=absmiddle>"; //图片的html代码，注意表情图片的路径要写对 Pos.pasteHTML(img); //在光标位置插入html代码，可不是text文本了 Pos.collapse(true); Pos.select(); document.all.fm.content.value=divedit.innerHTML; //把div层中输入的数据传递给form中隐藏的<textarea>元素，便于提交 } } 4,javascript代码就写完了，这时浏览细心的会发现一个问题，就是，刚打开页面时啥输入框都没有，我想默认一个输入框怎么办。 这样来操作：编辑<body>改为：<body onload=text_edit()>这样我们默认的就是”code模式”，当然你也可以改为”所见即所得模式”就看你自己的爱好了。 5,下面我们建立一个PHP页面提交一下，看能不得得到想要的数据，没光做半天，只基于客户端，服务器端什么也提交不上去。下面代码就不在讲解了。我们把此PHP页面命名为me.php 代码如下： <?php if($_POST['divinit']==1) { $content=$_POST['content']; $content=str_replace("\\","",$content); echo $content; } if($_POST['textinit']==1) { $content=$_POST['content']; echo "content:".$content."<br>"; echo "转换后:"; $content=str_replace("[01]","<img src=.\/face\/01.gif align=absmiddle>",$content); $content=str_replace("[02]","<img src=.\/face\/02.gif align=absmiddle>",$content); echo $content; } ?> 6，就写到这了，这个功能你可以添加在自己开发的留言版或聊天室里，论坛里早就有了，肯定比我这个要好，我也就不再费话了。 还有一点我要说明，就是当我们在”code模式”里编辑了点内容，再转到”所见即所得模式”时数据就丢失了。反过来也是如此。这里我也不再具体讲解了，这几段代码已经够我受的了，再讲下去我怕自己晕了，反而把大家带入误区。我只说一个实现方法： Code模式转为所见即所得模式时： 做一个隐藏的表单，随时监控<textarea>表单，并把数据即时保存下来，当转换事件发生时，我们这样来操作，其实关键的就是表情数据的转换问题，我们可以用javascript的转换数据函数把<textarea>中的表情数据 ([01]) 转换为html形式（<img src=’’ align=absmiddle>）。然后再用id.innerHTML方法把它读到<div>层中 所见即所得模式时转为code模式： 和上面相似就是把转换后的数据读到<textarea>的value量中。 《终》《于》《结》《束》《了》 感谢大家听我哆嗦这么半天。上面有什么不对的地方或是大家有更好的见解欢迎与我联系。我先消失会儿，打字有点累呀。 好运哦大家！！！ 附件中为我的调试程序大家可以参考一下： By:dx_andy [ 本帖最后由 会飞的老鼠 于 2007-8-26 00:49 编辑 ] 附件
|
