全部文档信息
<!DOCTYPE html> <html lang="zh" xmlns:sec="http://www.thymeleaf.org/extras/spring-security"> <head> <meta charset="utf-8"/> <title>金橘社区-文章编写</title> <link rel="stylesheet" href="{/editor.md/examples/css/style.css" th:href="@{/editor.md/examples/css/style.css/}"> <link rel="stylesheet" href="/editor.md/css/editormd.css" th:href="@{/editor.md/css/editormd.css}"/> <link rel="shortcut icon" href="https://pandao.github.io/editor.md/favicon.ico" type="image/x-icon"/> <link rel="stylesheet" href="layui/css/layui.css" media="all"> <script src="layui/layui.js" charset="utf-8"></script> <script src="Jquery/jquery-3.6.1.js"></script> <style> * { margin: 0; padding: 0; } .top-search { width: 680px; height: 45px; margin: 30px auto; } .search-box { display: flex; position: relative; } .search-left { width: 545px; height: 45px; border: 2px solid rgb(196, 199, 206); border-top-left-radius: 10px; border-bottom-left-radius: 10px; outline-color: rgb(242, 78, 130); } .icon-xiangji { position: absolute; right: 150px; top: 12px; font-size: 24px; color: rgb(196, 199, 206); } .search-right { color: #fff; font-size: 18px; width: 110px; height: 49px; border: 0px; border-top-right-radius: 10px; border-bottom-right-radius: 10px; background-color: rgb(242, 78, 130); } #su:hover { background: #14dc99; } </style> </head> <body> <form name="mdEditorForm" method="post"> <div class="top-search" style="margin-top: 13px;"> <button type="button" class="layui-btn layui-btn-primary1 layui-btn-lg" style="margin-top: 7px;margin-left: -1200px;" onclick="document.location.href='MyArticals.html'"><i class="layui-icon layui-icon-return" style="font-size: 20px; color: #1E9FFF;"></i><i style="color: #0e0c0d;font-family: 微软雅黑;font-weight: bold" onclick="return confirm('您还未保存,如果直接退出将不会保存数据。您确定直接退出?')">文章管理</i></button> <div class="search-box" style=" top: -45px;"> <input type="text" name="title" class="search-left" placeholder=" 请 输 入 文 章 标 题" required style="font-size: 20px;font-family: 微软雅黑;font-weight: bold;" onkeyup="this.value=this.value.replace(/\s+/g,'')" value="【无标题】"> <span class="iconfont icon-xiangji"></span> </div> <ul sec:authorize="!isAuthenticated()" class="layui-nav" lay-bar="disabled" style="width: 40px; height: 0px;margin-left: 863px;margin-top: -100px;z-index: 9999"> <li class="layui-nav-item" lay-unselect=""> <a href="javascript:;"><img src="/img/login.png" tppabs="http://t.cn/RCzsdCq" class="layui-nav-img" onclick="document.location.href='login.html'"></a> <dl class="layui-nav-child"> <dd><a href="javascript:;" onclick="document.location.href='login.html'">登入</a></dd> </dl> </li> </ul> <ul sec:authorize="hasRole('ROLE_A')" class="layui-nav" lay-bar="disabled" style="width: 40px; height: 0px;margin-left: 863px;margin-top: -100px;z-index: 9999"> <li class="layui-nav-item" lay-unselect=""> <a href="javascript:;"><img src="/img/user.jpg" tppabs="http://t.cn/RCzsdCq" class="layui-nav-img" onclick="document.location.href='#'"></a> <dl class="layui-nav-child"> <dd><a href="javascript:;">个人中心</a></dd> <dd><a href="javascript:;" th:href="@{/login.html}">切换账号</a></dd> <dd><a href="javascript:;" th:href="@{/logout}">注销</a></dd> </dl> </li> </ul> <ul class="layui-nav" lay-bar="disabled" style="width: 40px; height: 0px;margin-left: 863px;margin-top: -100px;z-index: 9999"> <li sec:authorize="hasRole('ROLE_B')" class="layui-nav-item" lay-unselect=""> <a href="javascript:;"><img src="/img/user2.jpg" tppabs="http://t.cn/RCzsdCq" class="layui-nav-img" onclick="document.location.href='#'"></a> <dl class="layui-nav-child"> <dd><a href="javascript:;">个人中心</a></dd> <dd><a href="javascript:;" onclick="document.location.href='login.html'">切换账号</a></dd> <dd><a href="javascript:;" th:href="@{/logout}">注销</a></dd> </dl> </li> </ul> </div> <div id="layout" style="margin-top: -41px;"> <header> </header> <div id="test-editormd"> <textarea style="display:none;" name="content"></textarea> </div> </div> </form> <script src="/editor.md/examplesjs/jquery.min.js" th:src="@{/editor.md/examples/js/jquery.min.js}"></script> <script src="/editor.md/editormd.js" th:src="@{/editor.md/editormd.js}"></script> <script type="text/javascript"> var testEditor; $(function () { $.get('/editor.md/examples/test.md', function (md) { testEditor = editormd("test-editormd", { width: "100%", height: "750px", path: '/editor.md/lib/', theme: "dark", markdown:'#欢迎您来到金橘社区!!', // previewTheme: "dark", editorTheme: "pastel-on-dark", imageUpload: true, imageFormats: ["jpg", "jpeg", "gif", "png", "bmp", "webp"], imageUploadURL: "/article/image/upload", toolbarIcons: function () { return ["undo", "redo", "|", "bold", "del", "italic", "quote", "ucwords", "uppercase", "lowercase", "|", "h1", "h2", "h3", "h4", "h5", "h6", "|", "list-ul", "list-ol", "hr", "|", "link", "reference-link", "image", "code", "preformatted-text", "code-block", "table", "datetime", "emoji", "html-entities", "pagebreak", "|", "goto-line", "watch", "preview", "fullscreen", "clear", "search", "|", "help", "info", "||", "publish"]; }, toolbarIconTexts: { publish: "<span bgcolor='gray' style='font-family: 微软雅黑;font-weight: bold;color: #00FF00'>发布</span>" }, toolbarHandlers: { publish: function (cm, icon, cursor, selection) { mdEditorForm.method = "post"; mdEditorForm.action = "/article/publish";//提交至服务器的路径 mdEditorForm.submit(); } } }); }); }); </script> </body> </html>
(2).后端页面
工具类
package com.jsxs.kumquat.utils; /** * @Author Jsxs * @Date 2023/4/11 15:50 * @PackageName:com.jsxs.kumquat.utils * @ClassName: FileUtils * @Description: TODO * @Version 1.0 */ import org.springframework.web.multipart.MultipartFile; import java.io.File; import java.io.IOException; import java.util.UUID; /** * 文件上传工具类 */ public class FileUtils { private static final String prePath = System.getProperty("user.dir") + "/src/main/resources/static/upload/"; /** * 上传文件 * @param file * @return 返回文件路径（以相对路径放回） */ public static String uploadFile(MultipartFile file) { if(file.isEmpty()) { return ""; } // 获取原文件名 String originFileName = file.getOriginalFilename(); // 我们通过UUID 来重新重组文件名 String uid = UUID.randomUUID().toString(); assert originFileName != null; String suffix = originFileName.substring(originFileName.lastIndexOf('.') + 1); String path = prePath + uid + "." + suffix; String returnPath = "/upload/" + uid + "." + suffix; File newFile = new File(path); if(newFile.getParentFile() != null && !newFile.getParentFile().exists()) { System.out.println("创建目录ing"); // 上面的 newFile.getParentFile() 已经保证了不为null. if(newFile.getParentFile().mkdirs()) { System.out.println("创建目录成功"); }else { System.out.println("创建目录失败"); return ""; } } try { file.transferTo(newFile); } catch (IOException e) { e.printStackTrace(); return ""; } return returnPath; } }
文件上传
package com.jsxs.kumquat.controller; import com.alibaba.fastjson.JSONObject; import com.baomidou.mybatisplus.core.conditions.query.QueryWrapper; import com.jsxs.kumquat.pojo.CkqnBlog; import com.jsxs.kumquat.pojo.CkqnUser; import com.jsxs.kumquat.service.CkqnBlogService; import com.jsxs.kumquat.utils.FileUtils; import org.springframework.stereotype.Controller; import org.springframework.ui.Model; import org.springframework.web.bind.annotation.*; import org.springframework.web.multipart.MultipartFile; import org.springframework.web.servlet.ModelAndView; import javax.annotation.Resource; import javax.servlet.http.HttpSession; import java.util.UUID; /** * <p> * 前端控制器 * </p> * * @author 吉士先生 * @since 2023-04-09 */ @Controller @RequestMapping("/article") public class CkqnBlogController { @Resource CkqnBlogService ckqnBlogService; @Resource HttpSession session; // 文章上传 @RequestMapping("/publish") public String publishArticle(CkqnBlog article) { CkqnUser user = (CkqnUser) session.getAttribute("loginUser"); // 1.作者信息 article.setAuthorId(user.getUid()); article.setAuthorName(user.getUsername()); article.setAuthorAvatar(user.getAvatar()); // 2.博客ID String replace = UUID.randomUUID().toString().replace("-", ""); article.setBid(replace); if (article.getTitle() == null) { System.out.println("标题为空?????????"); } boolean res = ckqnBlogService.save(article); if (res) { return "tipSuccess"; } return "tipFalse"; } // 图片上传 @RequestMapping("/image/upload") @ResponseBody public JSONObject imageUpload(@RequestParam("editormd-image-file") MultipartFile image) { JSONObject jsonObject = new JSONObject(); if (image != null) { String path = FileUtils.uploadFile(image); // 回调给 editor System.out.println(path); jsonObject.put("url", path); jsonObject.put("success", 1); jsonObject.put("message", "upload success!"); return jsonObject; } jsonObject.put("success", 0); jsonObject.put("message", "upload error!"); return jsonObject; } // 1.一篇详细文章 @RequestMapping("/get/{id}") public ModelAndView getArticleById(@PathVariable(name = "id") int id) { ModelAndView modelAndView = new ModelAndView(); CkqnBlog article = ckqnBlogService.getById(id); modelAndView.setViewName("WriteCenter/article"); if (article == null) { modelAndView.addObject("article", new CkqnBlog()); } modelAndView.addObject("article", article); return modelAndView; }
2.修改文件
(1).前端页面
需要引入数据
<link rel="stylesheet" th:href="@{/editor.md/examples/css/style.css/}"> <link rel="stylesheet" th:href="@{/editor.md/css/editormd.css}"/> <link rel="shortcut icon" href="https://pandao.github.io/editor.md/favicon.ico" type="image/x-icon"/> <script th:src="@{/Jquery/jquery-3.6.1.js}"></script>
被修改页面的展示
<div class="col-md-12 mb-3"> <div id="blog-content"> <textarea required name="content" th:text="${blog.getContent()}" id="content" style="display:none;" rows="3" class="form-control"> </textarea> </div> </div>
js
<script th:src="@{/editor.md/examples/js/jquery.min.js}"></script> <script th:src="@{/editor.md/editormd.js}"></script> <script type="text/javascript"> var testEditor; $(function() { testEditor = editormd("blog-content", { width : "100%", //1. height : "750px", //2. syncScrolling : "single", //3.单页 path: '/editor.md/lib/', //4.路径 theme: "dark", //5.黑暗主题 previewTheme: "gary", editorTheme: "pastel-on-dark", imageUpload: true, //6.文件上传 imageFormats: ["jpg", "jpeg", "gif", "png", "bmp", "webp"], imageUploadURL: "/article/image/upload", //7.文件上传对象 onload : function() { console.log('onload', this); }, toolbarIcons: function () { return ["undo", "redo", "|", "bold", "del", "italic", "quote", "ucwords", "uppercase", "lowercase", "|", "h1", "h2", "h3", "h4", "h5", "h6", "|", "list-ul", "list-ol", "hr", "|", "link", "reference-link", "image", "code", "preformatted-text", "code-block", "table", "datetime", "emoji", "html-entities", "pagebreak", "|", "goto-line", "watch", "preview", "fullscreen", "clear", "search", "|", "help", "info", "||", "publish"]; }, toolbarIconTexts: { //8. 提交修改的按钮 publish: "<span bgcolor='gray' style='color: #00FF00;font-weight: bold;font-family: 微软雅黑'>提交修改</span>" }, toolbarHandlers: { //9.修改文章的路径 publish: function (cm, icon, cursor, selection) { mdEditorForm.method = "post"; mdEditorForm.action = "/article/toupdate";//提交至服务器的路径 mdEditorForm.submit(); } }, onfullscreen : function() { console.log("onfullscreen"); document.getElementsByClassName("navbar")[0].style.display="none"; }, onfullscreenExit : function() { console.log("onfullscreenExit"); document.getElementsByClassName("navbar")[0].style.display=""; } }); }); </script>
全部前端
<!DOCTYPE html> <html lang="zh" xmlns:sec="http://www.thymeleaf.org/extras/spring-security" xmlns:th="http://www.thymeleaf.org"> <head> <meta charset="utf-8"/> <title>金橘社区-文章修改</title> <link rel="stylesheet" th:href="@{/editor.md/examples/css/style.css/}"> <link rel="stylesheet" th:href="@{/editor.md/css/editormd.css}"/> <link rel="shortcut icon" href="https://pandao.github.io/editor.md/favicon.ico" type="image/x-icon"/> <link rel="stylesheet" th:href="@{/layui/css/layui.css}" media="all"> <script th:src="@{/layui/layui.js}" charset="utf-8"></script> <script th:src="@{/Jquery/jquery-3.6.1.js}"></script> <style> * { margin: 0; padding: 0; } .top-search { width: 680px; height: 45px; margin: 30px auto; } .search-box { display: flex; position: relative; } .search-left { width: 545px; height: 45px; border: 2px solid rgb(196, 199, 206); border-top-left-radius: 10px; border-bottom-left-radius: 10px; outline-color: rgb(242, 78, 130); } .icon-xiangji { position: absolute; right: 150px; top: 12px; font-size: 24px; color: rgb(196, 199, 206); } .search-right { color: #fff; font-size: 18px; width: 110px; height: 49px; border: 0px; border-top-right-radius: 10px; border-bottom-right-radius: 10px; background-color: rgb(242, 78, 130); } #su:hover { background: #14dc99; } </style> </head> <body> <form name="mdEditorForm" method="post"> <!-- 隐藏域 uid --> <input type="hidden" name="bid" th:value="${blog.getBid()}"> <div class="top-search" style="margin-top: 13px;"> <a type="button" class="layui-btn layui-btn-primary1 layui-btn-lg" style="margin-top: 7px;margin-left: -1200px;" th:href="@{/MyArticals.html}"><i class="layui-icon layui-icon-return" style="font-size: 20px; color: #1E9FFF;"></i><i style="color: #0e0c0d;font-family: 微软雅黑;font-weight: bold" onclick="return confirm('您还未保存更改数据,如果直接退出将不会保存更改的数据。您确定直接退出?')">文章管理</i></a> <div class="search-box" style=" top: -45px;"> <!-- 标题--> <input type="text" name="title" class="search-left" placeholder=" 请 输 入 文 章 标 题" required style="font-size: 20px;font-family: 微软雅黑;font-weight: bold;" onkeyup="this.value=this.value.replace(/\s+/g,'')" th:value="${blog.title}"> <span class="iconfont icon-xiangji"></span> </div> <ul class="layui-nav" lay-bar="disabled" style="width: 40px; height: 0px;margin-left: 863px;margin-top: -100px;z-index: 9999"> <li sec:authorize="!isAuthenticated()" class="layui-nav-item" lay-unselect=""> <a href="javascript:;"><img src="/img/login.png" tppabs="http://t.cn/RCzsdCq" class="layui-nav-img" onclick="document.location.href='login.html'"></a> <dl class="layui-nav-child"> <dd><a href="javascript:;" onclick="document.location.href='login.html'">登入</a></dd> </dl> </li> </ul> <ul class="layui-nav" lay-bar="disabled" style="width: 40px; height: 0px;margin-left: 863px;margin-top: -100px;z-index: 9999"> <li sec:authorize="isAuthenticated()" class="layui-nav-item" lay-unselect=""> <a href="javascript:;"><img src="/img/user.jpg" tppabs="http://t.cn/RCzsdCq" class="layui-nav-img" onclick="document.location.href='#'"></a> <dl class="layui-nav-child"> <dd><a href="javascript:;">个人中心</a></dd> <dd><a href="javascript:;" th:href="@{/login.html}">切换账号</a></dd> <dd><a href="javascript:;" th:href="@{/logout}">注销</a></dd> </dl> </li> </ul> </div> <div id="layout" style="margin-top: -41px;"> <header> </header> <div class="col-md-12 mb-3"> <div id="blog-content"> <textarea required name="content" th:text="${blog.getContent()}" id="content" style="display:none;" rows="3" class="form-control"> </textarea> </div> </div> </div> </div> </form> <script th:src="@{/editor.md/examples/js/jquery.min.js}"></script> <script th:src="@{/editor.md/editormd.js}"></script> <script type="text/javascript"> var testEditor; $(function() { testEditor = editormd("blog-content", { width : "100%", height : "750px", syncScrolling : "single", path: '/editor.md/lib/', theme: "dark", previewTheme: "gary", editorTheme: "pastel-on-dark", imageUpload: true, imageFormats: ["jpg", "jpeg", "gif", "png", "bmp", "webp"], imageUploadURL: "/article/image/upload", onload : function() { console.log('onload', this); }, toolbarIcons: function () { return ["undo", "redo", "|", "bold", "del", "italic", "quote", "ucwords", "uppercase", "lowercase", "|", "h1", "h2", "h3", "h4", "h5", "h6", "|", "list-ul", "list-ol", "hr", "|", "link", "reference-link", "image", "code", "preformatted-text", "code-block", "table", "datetime", "emoji", "html-entities", "pagebreak", "|", "goto-line", "watch", "preview", "fullscreen", "clear", "search", "|", "help", "info", "||", "publish"]; }, toolbarIconTexts: { publish: "<span bgcolor='gray' style='color: #00FF00;font-weight: bold;font-family: 微软雅黑'>提交修改</span>" }, toolbarHandlers: { publish: function (cm, icon, cursor, selection) { mdEditorForm.method = "post"; mdEditorForm.action = "/article/toupdate";//提交至服务器的路径 mdEditorForm.submit(); } }, onfullscreen : function() { console.log("onfullscreen"); document.getElementsByClassName("navbar")[0].style.display="none"; }, onfullscreenExit : function() { console.log("onfullscreenExit"); document.getElementsByClassName("navbar")[0].style.display=""; } }); }); </script> </body> </html>
