学习内容：学习JavaWeb（Day46）
1、使用富文本编辑器simditor
1、使用富文本编辑器
（1）常见的富文本编辑器有simditor、CKEditor、tinymce、kindEditor、UEditor、xhEditor
今天学习使用simditor，需要到官网下载相关组件。
主要用到
simditor.css
jquery.min.js
module.js
hotkeys.js
uploader.js
simditor.js
（2）创建富文本编辑页面simditor.jsp
<head>
<title>Title</title>
<link rel="stylesheet" href="/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="js/simditor-2.3.28/site/assets/styles/simditor.css" />
<script src="js/simditor-2.3.28/site/assets/scripts/jquery.min.js"></script>
<script type="text/javascript" src="js/simditor-2.3.28/site/assets/scripts/module.js"></script>
<script type="text/javascript" src="js/simditor-2.3.28/site/assets/scripts/hotkeys.js"></script>
<script type="text/javascript" src="js/simditor-2.3.28/site/assets/scripts/uploader.js"></script>
<script type="text/javascript" src="js/simditor-2.3.28/site/assets/scripts/simditor.js"></script>
</head>
<body>
<div class = "container" >
<form action="/simditor" method="post">
<textarea id="editor" placeholder="Balabala" autofocus name = "msg"></textarea>
<input type="submit" value="发表">
</form>
</div>
<script type = "text/javascript">
$(function(){
var editor = new Simditor({
textarea: $('#editor'),
toolbar:[
'color',
'ol',
'ul',
'blockquote',
'code',
'table',
'link',
'image',
'hr',
'indent',
'outdent',
'alignment'
],
upload:{
url:'/simditorupload',
connectionCount: 3,
leaveConfirm: 'Uploading is in progress, are you sure to leave this page?'
},
pasteImage:true
});
});
</script>
</body>
表单提交到SimditorServelet.java
@WebServlet(urlPatterns = "/simditor")
public class SimditorServlet extends HttpServlet {
@Override
protected void doGet(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException {
SimditorService simditorService = new SimditorService();
List<Msg> msgList = simditorService.findAll();
request.setAttribute("msgList",msgList);
request.getRequestDispatcher("simditorList.jsp").forward(request,response);
}
@Override
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
request.setCharacterEncoding("UTF-8");
String msg = request.getParameter("msg");
SimditorService simditorService = new SimditorService();
Msg m = new Msg();
m.setMsg(msg);
simditorService.save(m);
response.sendRedirect("/simditor");
}
}
创建simditorList.jsp页面，用来展示提交的信息
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
<title>Title</title>
<link rel="stylesheet" href="/css/bootstrap.min.css">
</head>
<body>
<table class="table table-striped">
<thead>
<tr>
<th>ID</th>
<th>内容</th>
</tr>
</thead>
<tbody>
<c:forEach items="${msgList}" var="msg">
<tr>
<td>${msg.id}</td>
<td>${msg.msg}</td>
</tr>
</c:forEach>
</tbody>
</table>
</body>
</html>
创建SimditorUploadServlet.java，实现文件上传功能
@WebServlet("/simditorupload")
public class SimditorUploadServlet extends HttpServlet {
@Override
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
UploadUtil uploadUtil = new UploadUtil();
try {
Map<String,Object> result = uploadUtil.upload(request);
boolean success = (boolean) result.get("success");
if(success){
String imgName = (String) result.get("imgName");
Map<String,Object> msg = new HashMap<>();
msg.put("success",true);
msg.put("file_path","http://localhost:8080/img/show?img="+imgName);
ObjectMapper mapper = new ObjectMapper();
response.setContentType("application/json;charset=utf-8");
PrintWriter out = response.getWriter();
String jsonMsg = mapper.writeValueAsString(msg);
out.print(jsonMsg);
out.flush();
out.close();
}
} catch (FileUploadException e) {
e.printStackTrace();
}
}
}
simditorList.jsp页面展示信息时通过ShowFileServlet.java查看图片
@WebServlet("/img/show")
public class ShowFileServlet extends HttpServlet {
@Override
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
String dir = DirectoryUtil.FILE_DIR;
String img = request.getParameter("img");
File file = new File(dir + img);
InputStream is = new FileInputStream(file);
OutputStream outputStream = response.getOutputStream();
int len = -1;
while((len = is.read()) != -1){
outputStream.write(len);
}
is.close();
outputStream.close();
}
}
|