700字范文 > 学习日志day46（-09-10）（1 使用富文本编辑器simditor）

学习日志day46（-09-10）（1 使用富文本编辑器simditor）

时间：2023-01-23 04:27:01

学习内容：学习JavaWeb（Day46）

1、使用富文本编辑器simditor

（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'),//选中textarea元素toolbar:[//设置编辑器工具栏/* 'title','bold','italic','underline','strikethrough','fontScale',*/'color','ol','ul','blockquote','code','table','link','image','hr','indent','outdent','alignment'],upload:{url:'/simditorupload',//设置上传文件时做处理的servlet路径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 //将编辑器内容存入数据库后转到get方法protected void doGet(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException {SimditorService simditorService = new SimditorService();List<Msg> msgList = simditorService.findAll(); //从数据库查出所有存入的信息request.setAttribute("msgList",msgList); //转发到simditorList.jsp页面request.getRequestDispatcher("simditorList.jsp").forward(request,response);}@Override //表单通过post提交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");//重定向到simditor，转到get方法}}

创建simditorList.jsp页面，用来展示提交的信息

<%@ page contentType="text/html;charset=UTF-8" language="java" %><%@ taglib prefix="c" uri="/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 {@Overrideprotected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {UploadUtil uploadUtil = new UploadUtil();//使用之前学习创建的文件上传工具类try {//返回一个Map对象，存入键success和imgNameMap<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);//将查看服务器中的文件的路径存入Map集合msg.put("file_path","http://localhost:8080/img/show?img="+imgName);//信息以json数据格式刷出，发送回前端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 {@Overrideprotected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {String dir = DirectoryUtil.FILE_DIR;//用到之前学习创建的获取目录工具类String img = request.getParameter("img");//获取参数img，即文件名File file = new File(dir + img);//拼出图片的urlInputStream is = new FileInputStream(file);//通过输入输出流查看图片OutputStream outputStream = response.getOutputStream();int len = -1;while((len = is.read()) != -1){outputStream.write(len);}is.close();outputStream.close();}}

本内容不代表本网观点和政治立场，如有侵犯你的权益请联系我们处理。

网友评论

网友评论仅供其表达个人看法，并不表明网站立场。