java版本帖子回复功能
由于要做一个发贴功能,发帖菜的是ckeditor插件,然后回帖,由于ckeditor的功能太多了,本人用的又不熟悉,又是一初来咋道的菜鸟所以就想找一个简单点的,看看网上的博格回复也基本是都是一个内容加上一个表情就Ok了,所以就找了一个表情回复的插件。
用这个插件了要导入一个css和一个js就可以了,非常方便,这是应为他用的东西都是别人网站上的,也就是线上的资源,如果断网或者不能上网就不能用了,这也是方便的代价吧。如果有大神看到后可以本地化希望通知本人一下,本人在此谢过。
两个插件我会附加上,有需要的可以下载。以下是页面代码,仅供参考:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" type="text/css" href="/community/css/jquery.sinaEmotion.css" />
<style type="text/css">
h1 {
font: 16px '微软雅黑';
color: #0000ff;
}
body{
font-size:13px;
}
</style>
<title>帖子详情</title>
</head>
<body onload="out();">
<h3>帖子详情<span ><a href="/community/bbs/postList">帖子列表</a></span></h3>
<div >
<p>${post.title }</p>
<p>${post.content}
<span ><fmt:formatDate value="${post.postTime}" pattern="yyyy-MM-dd hh:mm:ss"/></span>
</p>
</div>
<div >
<c:choose>
<c:when test="${empty replyList}">
<p>暂无回帖</p>
</c:when>
<c:otherwise>
<c:forEach items="${replyList}" var="reply" varStatus="stu">
<div >
<p >
${stu.index+1}楼 ${reply.userName} <fmt:formatDate value="${reply.replyTime}" pattern="yyyy-MM-dd hh:mm:ss"/> 发表
</p>
<p><span id="replycontentid" class="emotion">${reply.content}</span></p>
</div>
</c:forEach>
</c:otherwise>
</c:choose>
<form action="/community/bbs/addReply" method="post" id="replyForm">
<h3>回复</h3>
<input type="hidden" name="postId" value="${post.id}"/>
<textarea rows="10" cols="80" name="content" class="emotion" ></textarea>
<input id="face" type="button" value="表情" />
<input type="button" value="提交" onclick="addReply();"/>
</form>
</div>
<br />
<script type="text/javascript" class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="/community/js/jquery-1.8.0.min.js"></script>
<script type="text/javascript" class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="/community/js/jquery.sinaEmotion.js"></script>
<script type="text/javascript">
// 绑定表情
$('#face').SinaEmotion($('.emotion'));
function addReply(){
$("#replyForm").submit();
}
$(function(){
});
function out(){
var emotions=new Array();
emotions=$('.emotion');
var temphtml="";
for(var i=0;i<emotions.length;i++){
temphtml=emotions[i].innerHTML;
if(temphtml.indexOf("[")>-1||temphtml.indexOf("]")>-1){
emotions[i].innerHTML=AnalyticEmotion(temphtml);
}
}
}
</script>
</body>
</html>
页面上显示使用的是C标签,后台使用的是springMVC,后台就是一个保存回复信息和查询帖子和回复信息的功能,本要在这里就不写了,简单点就是增删改查功能。
因为常看别人的博客对自己有帮助,所以自己也想写写博客帮助别人,写的不好还请看的人见谅。
共同学习,写下你的评论
评论加载中...
作者其他优质文章