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

fengyongcug 2011-08-11 12:07:48

小弟在搞一个BBS，我想在回帖的时候能够像QQ那样点击图片按钮弹出图片选择框，选择图片后加入文本框中的回复内容，该怎么实现啊？应该有个添加表情图片的小插件吧，哪位高手能详细指点啊，最好来点代码提示

...全文

711 15 打赏收藏转发到动态举报

写回复

用AI写文章

15 条回复

切换为时间正序

请发表友善的回复…

发表回复

zyrobert 2013-08-12

打赏
举报

楼主看这个这个可是百度贴吧用的富媒体哦这里

jiang199312 2013-08-12

打赏
举报

qiang0009 2011-08-11

打赏
举报

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

可编辑区<br>

<img src="">

</div>

看看这样的可以吗？

qiang0009 2011-08-11

打赏
举报

把表情做成隐藏代码比如说 [face]001[/face] 就是你第一表情然后你看帖子的时候截取字符串自动匹配去

飞跃颠峰 2011-08-11

打赏
举报

用Js插件，比如kindeditor

tmhk123 2011-08-11

打赏
举报

FCKeditor 直接拿来用- -

空白-键 2011-08-11

打赏
举报

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

emperorsix 2011-08-11

打赏
举报

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

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

fy13720184314 2011-08-11