JSP中如何实现添加表情功能？

小弟在搞一个BBS，我想在回帖的时候能够像QQ那样点击图片按钮弹出图片选择框，选择图片后加入文本框中的回复内容，该怎么实现啊？应该有个添加表情图片的小插件吧，哪位高手能详细指点啊，最好来点代码提示 --------------------编程问答-------------------- 用Js插件，比如kindeditor --------------------编程问答-------------------- 把表情做成隐藏代码比如说 [face]001[/face] 就是你第一表情然后你看帖子的时候截取字符串自动匹配去 --------------------编程问答--------------------

<div contentEditable style="background:#eee;border:inset 2px;width:300px;height:100px;overflow:auto;font:12px tahoma">

可编辑区<br>

<img src="">

</div>

   看看这样的可以吗？ --------------------编程问答-------------------- 用Js插件，比如kindeditor --------------------编程问答-------------------- 你可以使用Flex自己做一个，Flex里面有这样的一个控件的，很简单的…… --------------------编程问答-------------------- http://download.csdn.net/source/3036785
这个网址有现成的你可以加载到myeclipse中  部署
访问 index.jsp就可以看到了
当时就是仿照QQ邮箱的  基于xheditor插件
现在xheditor富文本编辑器更加完善了！不仅是表情  有一部分直接支持粘贴图片 --------------------编程问答-------------------- 在线编辑器啊 fckediter，百度也新出了个在线编辑器 --------------------编程问答-------------------- fckediter编辑器配置很复杂啊，还有没有其它办法啊 --------------------编程问答--------------------

下面这个代码应该没问题，我看的一本书上的

<html>
<head>
<style>
/* 定义表情框样式 */
#face{
table-cellspcing:1px;
display:none;
position:absolute;
top:30px;
left:100%;
border:1px solid #aaa;
background:#fff;
}
/* 定义编辑框样式 */
#main{
width:370px;
height:150px;
border:1px solid #ccc;
position:absolute;
}
/* 定义编辑框中的工具条样式 */
#main #toolbar{
width:100%;
height:30px;
background:url(images/bg.gif) repeat-x;
}
/* 定义工具条中的链接样式 */
#toolbar a{
width:24px;
height:24px;
line-height:24px;
text-align:center;
text-decoration:none;
color:#000;
font-weight:bold;
font-size:15px;
float:left;
}
/* 定义工具条中的链接伪样式 */
#toolbar a:hover{
border-right:1px solid #aaa;
border-bottom:1px solid #aaa;
}
</style>
</head>
<body>
<div id='main'>
<div id='toolbar'>
<a href='javascript:void(0)' onclick='onEffect("Bold")'>B</a>
<a href='javascript:void(0)' style='font-style:italic' onclick='onEffect("Italic")'>I</a>
<a href='javascript:void(0)' style='text-decoration:underline' onclick='onEffect("Underline")'>U</a>
<img width=24 height=24 src='face/0.gif' style='float:right;cursor:pointer;' onclick='showFace(this)'/>
</div>
<iframe allowTransparency='true' scrolling='auto' width='100%' height='122' src="" id='editor' frameBorder='0'>
</iframe>
<table id="face">
<tr>
<td><img src="face/0.gif"  onclick="insertFace(this)" /></td>
<td><img src="face/1.gif"  onclick="insertFace(this)" /></td>
<td><img src="face/2.gif"  onclick="insertFace(this)" /></td>
<td><img src="face/3.gif"  onclick="insertFace(this)" /></td>
</tr>
<tr>
<td><img src="face/4.gif"  onclick="insertFace(this)" /></td>
<td><img src="face/5.gif"  onclick="insertFace(this)" /></td>
<td><img src="face/6.gif"  onclick="insertFace(this)" /></td>
<td><img src="face/7.gif"  onclick="insertFace(this)" /></td>
</tr>
<tr>
<td><img src="face/8.gif"  onclick="insertFace(this)" /></td>
<td><img src="face/9.gif"  onclick="insertFace(this)" /></td>
<td><img src="face/10.gif" onClick="insertFace(this)" /></td>
<td><img src="face/11.gif" onClick="insertFace(this)" /></td>
</tr>
<tr>
<td><img src="face/12.gif" onClick="insertFace(this)" /></td>
<td><img src="face/13.gif" onClick="insertFace(this)" /></td>
<td><img src="face/14.gif" onClick="insertFace(this)" /></td>
<td><img src="face/15.gif" onClick="insertFace(this)" /></td>
</tr>
</table>
</div>

</body>
</html>
<script type="text/javascript">
//定义编辑窗口引用
var editPane = null;

//打开表情窗口
function showFace(img){
var face = document.getElementById("face");
face.style.display="block";
face.style.left = img.offsetLeft+img.offsetWidth-face.offsetWidth+'px';
face.onclick = function(){face.style.display="none";};
editPane.document.onclick = function(){face.style.display="none";};
}

//插入图片
function insertFace(img)
{
var image = "<img src='" + img.src + "' />";
editPane.focus()
editPane.document.execCommand('insertImage',false,img.src);
}

//初始化编辑窗口
(function()
{
editPane = document.getElementById("editor").contentWindow;
editPane.document.designMode = 'on';
editPane.document.contentEditable = true;
editPane.document.open();
editPane.document.close();
})();

//改变效果
function onEffect(effect)
{
editPane.document.execCommand(effect,false,null);
}
</script>

--------------------编程问答-------------------- 以前做过，将表情放在一块div里面，刚开始的时候隐藏，点击表情按钮的时候显示，点击表情的时候，在文本框里面加入<img>标签，表情div隐藏，我当时文本框也是一个div，所以点击表情后，文本框也显示表情图片,而不是一个img标签代码 --------------------编程问答-------------------- FCKeditor 直接拿来用- - --------------------编程问答-------------------- --------------------编程问答--------------------

--------------------编程问答-------------------- 除 --------------------编程问答-------------------- 楼主看这个这个可是百度贴吧用的富媒体哦这里

补充：Java ,  Web 开发