當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

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

發布時間：2023/12/29 编程问答 29 豆豆

生活随笔收集整理的這篇文章主要介紹了学习日志day46（2021-09-10）（1、使用富文本编辑器simditor）小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

學習內容：學習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="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 {@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();} }

總結

以上是生活随笔為你收集整理的学习日志day46（2021-09-10）（1、使用富文本编辑器simditor）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。