关于论坛发帖中所见即所得功能实现的讲解

来源：互联网发布：网络交友新时空编辑：程序博客网时间：2024/05/16 05:29

//标题：关于论坛发帖中所见即所得功能的实现

//作者：dx_andy

//时间：2007.8.24 晚-------2007.8.25 早

//测试环境：win32 apache2.2.4 php5.2.1 mysql5.0.27

//联系：QQ:45665758 E-mail:dx_andy@163.com

测试代码下载:点击下载

先说一下所见即所得的实现原理吧：

相信有很多人都想过或尝试过写一个实现此功能的程序，成功了当然好了，不成功那也不要伤心，起码自己做过，多少会有些心得。

下面我说一下为什么有的人会失败，这也就是本程序的实现原理了：

这个功能一般在论坛发言区多见，它首先向人们介绍了这个功能，但是同时又把很多初学者带入一个误区。好多初学者认为图片即时显示是把图片插在了<textarea>元素中。其实不是这样的，所见即所得模式其实用到的是一个<div>层或是一个<iframe>。

(本程序用<div>,因为<iframe>方式不会呀，我想它也是基于<div>的，不知大家怎么想，有不同见解可以联系我。对了,<textarea>中也可插入图片，但要想在光标位置插入图片很难,不再研究)。

Code模式用到的就是简单的<textarea>，这里就不再讲述，大家一定都会。

好了，马上开始吧，咱们不说费话。

1，建立一个表格

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

</table>

2,为了页面美观一些，简单写一个样式表，加在<head>与</head>之间

td,div{font-size:10pt;padding:0;}

</style>

3,然后就到了我们的javascript代码区了。

（唉，想起来就头痛，简简单单的几行代码，害我调试了一晚上都没弄好，结果早上发现了有一行代码少写了一个字母，真是气我全身毛都起来了。唉，总体感受：这个JS怎么比PHP还要难呀！！！）

把上面代码写好后，浏览一下。发现怎么只有两个按钮呀，又没有输入框，又没有表情图片。呵呵，不要着急。输入框和表情图片看完下面两行代码就出来了。

将下面代码加在<head>与</head>之间：

//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