UEditor Docs这是UEditor官方网站，网站里有官方使用教程。
1、先把富文本编辑器的压缩包下载到本地，在我发布的资源里下载(不要积分)
解压之后主要是这个东西
2、把这个解压文件拖动到eclipse的项目里，拖进来之后有报错，别着急问题不大
我放在了：WebContent/resource/utf8-jsp
3、把utf8-jsp\jsp\lib路径下所有的jar包导进项目WEB-INF\lib下面
4、把富文本配置进自己的前端页面
记得把配置文件的src换成自己文件存放的路径
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>发布公告</title>
</head>
<body>
<div class="container">
<div class="top">
<span>发布社区公告</span>
</div>
<div class="box">
<div class="item">
<span>公告标题</span>
<input type="text" placeholder="请输入标题" class="title">
</div>
<div class="item">
<span>公告内容</span>
<!-- 加载编辑器的容器 -->
<script id="bianjiqi" name="content" type="text/plain">
</script>
</div>
<div class="item">
<input type="button" value="发布" class="add">
</div>
</div>
</div>
<!-- 配置文件 -->
<script type="text/javascript" src="resource/utf8-jsp/ueditor.config.js"></script>
<!-- 编辑器源码文件 -->
<script type="text/javascript" src="resource/utf8-jsp/ueditor.all.js"></script>
<!-- 实例化编辑器 -->
<script type="text/javascript">
//初始化富文本编辑器
var ue = UE.getEditor('bianjiqi');
$(function(){
//发起添加请求
$(".add").click(function(){
var title = $(".title").val();
//<!-- 获取编辑器的内容 -->
var content = ue.getContent();
//使用ajax发起请求
$.ajax({
url:"contentAdd",
type:"post",
data:{
title:title,
content:content
},
success:function(data){
if(data.code==200){
alert("发布成功");
}else{
alert(发布失败);
}
},
error:function(){
alert("请联系管理员")
}
})
})
})
</script>
</body>
</html>运行结果：
5、存储富文本剪辑器的内容到数据库
上图中的代码可以看出，用post方法，把title和content数据传输到了后端。
那我们在servlet中接收一下，直接往数据库插入就可以了，我这里还插入了一个当前日期。
插入时有一个要注意的就是content = content.replaceAll("\"", "\'");
这句时要替换content中的引号，不然插入语句会报错，大家可以自己尝试一下，当插入content带有style样式时发生。
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// TODO Auto-generated method stub
//doGet(request, response);
String title = request.getParameter("title");
Timestamp timestamp = new Timestamp(System.currentTimeMillis());
String content = request.getParameter("content");
content = content.replaceAll("\"", "\'");
//数据库中查询有无该账户
String sql = "insert into notice(title,datetime,content) values (\""+title+"\",\""+timestamp+"\",\""+content+"\")";
System.out.println("sql语句是:"+sql);
int res = MysqlUtil.add(sql);
String json = "";
if(res>0) {
json = "{\"code\":200,\"msg\":\"发布成功\"}";
}else {
json = "{\"code\":999,\"msg\":\"发布失败\"}";
}
response.setCharacterEncoding("utf-8");
response.setContentType("text/json;charset=utf-8");
response.getWriter().write(json);
}6、把数据库中存储的内容回显到前端页面
先把接收信息的三个div写好，我这里为了跳转获取是哪一个文章，使用了cookie，如果没有忽略就好，总之就是ajax请求，然后把数据回显。
前端代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>查看所有公告具体信息</title>
<script src="resource/js/jquery.js"></script>
<script src="resource/js/jquery.cookie.js"></script>
<script>
//用jquery封装cookie的方式获取cookie
var id = $.cookie("noticeid")
$.ajax({
url:"contentById?id="+id,
type:"get",
success:function(data){
console.log(data.data[0])
$(".title").html(data.data[0].title)
$(".datetime").html(data.data[0].datetime)
$(".content").html(data.data[0].content)
}
/* error:function(){
alert("出现异常，请联系程序员")
} */
})
</script>
</head>
<body>
<h3 class="title"></h3>
<h3 class="datetime"></h3>
<div class="content">
</div>
</body>
</html>后端代码：
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// TODO Auto-generated method stub
request.setCharacterEncoding("utf-8");
//获取前端数据
String id = request.getParameter("id");
//String password = request.getParameter("password");
//数据库中查询有无该账户
String sql = "select * from notice where id = \""+id+"\"";
String [] col = {"title","datetime","content"};
String json = MysqlUtil.getJsonBySql(sql,col);
response.setCharacterEncoding("utf-8");
response.setContentType("text/json;charset=utf-8");
response.getWriter().write(json);
}
运行结果：
这样就完成了富文本编辑器的简单使用，把文本数据存储，然后把数据提取回显。
3375
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
