Springboot引入Markdown

川长思鸟来 2022-09-09 04:49 151阅读 0赞

[参考链接][Link 1]

# 一、下载资源 #

[点这直接下载][Link 2]  
**若不行多刷新，或是看下面**  
[Markdown][]  
![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5Zyo5LiL5piv5bCP55m9_size_14_color_FFFFFF_t_70_g_se_x_16]

# 二、原理 #

-- 文章表
    CREATE TABLE article (
     id  int PRIMARY KEY AUTO_INCREMENT, -- int文章的唯一ID
     author varchar(50) NOT NULL, -- 作者
     title  varchar(100) NOT NULL, -- 标题
     content  longtext NOT NULL, -- 文章的内容
     cid int ,-- 栏目id
     FOREIGN KEY (cid) REFERENCES scolumn(id) ON DELETE CASCADE ON UPDATE CASCADE
    )

![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5Zyo5LiL5piv5bCP55m9_size_20_color_FFFFFF_t_70_g_se_x_16]

# 三、导入资源 #

> 这里的操作可做可不做,方便管理  
> 在resources/static 建一个文件夹editormd目录  
> 在 resources/templates下创建一个editor目录

1.  将解压后的如下文件导入editormd  
    ![在这里插入图片描述][6a5f1fda83e84ec8990e890fc7f6d2ef.png]  
    **创建css、js**  
    在解压文件中找到如下文件加入  
    ![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5Zyo5LiL5piv5bCP55m9_size_9_color_FFFFFF_t_70_g_se_x_16]
2.  editor目录新建一个editormd.html文件（作为编辑页面）  
    ![在这里插入图片描述][f463fb5e25824f09a3157fc853e5e040.png]

<!DOCTYPE html>
    <html lang="ch-CN" xmlns:th="http://www.thymeleaf.org">
    <head>
        <meta charset="UTF-8">
        <title>Markdown</title>
        <link rel="stylesheet" type="text/css" th:href="@{/editormd/css/style.css}"/>
        <link rel="stylesheet" type="text/css" th:href="@{/editormd/css/editormd.css}"/>
        <link rel="shortcut icon" href="https://pandao.github.io/editor.md/favicon.ico" type="image/x-icon" />
        <script type="text/javascript" th:src="@{/editormd/js/jquery.min.js}"></script>
        <script type="text/javascript" th:src="@{/editormd/js/editormd.min.js}"></script>
        <script type="text/javascript"> var testEditor; $(function() { testEditor = editormd("test-editormd", { width: "90%", height: 640, syncScrolling: "single", emoji: true, path: "../editormd/lib/", //图片上传 imageUpload : true, imageFormats : ["jpg", "jpeg", "gif", "png", "bmp", "webp"], imageUploadURL : "/file/upload" }); }); </script>
    </head>
    <body>
    <div id="layout">
        <header>
            <h1>Simple example</h1>
        </header>
        <div id="test-editormd">
            <textarea style="display:none;"></textarea>
        </div>
    </div>
    
    </body>
    </html>

1.  展示页面在templates下创建viewArticle.html **注意别放在editor下（我当时放在下面在搞了挺久，解析不到view）**

<!DOCTYPE html>
    <html lang="ch-CN" xmlns:th="http://www.thymeleaf.org">
    <head>
       <meta charset="UTF-8">
       <title>Markdown</title>
       <link rel="stylesheet" type="text/css" th:href="@{/editormd/css/style.css}"/>
       <link rel="stylesheet" type="text/css" th:href="@{/editormd/css/editormd.css}"/>
       <link rel="shortcut icon" href="https://pandao.github.io/editor.md/favicon.ico" type="image/x-icon" />
       <script type="text/javascript" th:src="@{/editormd/js/jquery.min.js}"></script>
       <script type="text/javascript" th:src="@{/editormd/js/editormd.min.js}"></script>
       <script type="text/javascript"> var testEditor; $(function() { testEditor = editormd("test-editormd", { width: "90%", height: 640, syncScrolling: "single", emoji: true, path: "../editormd/lib/", //图片上传 imageUpload : true, imageFormats : ["jpg", "jpeg", "gif", "png", "bmp", "webp"], imageUploadURL : "/file/upload" }); }); </script>
    </head>
    <body>
    <div id="layout">
       <header>
           <h1>Simple example</h1>
       </header>
       <div id="test-editormd">
           <textarea style="display:none;"></textarea>
       </div>
    </div>
    </body>
    </html>

1.  图片上传  
    在Controller写接口，见上传的文件保存在项目所在根目录下

@Controller
    public class articleController { 
        @Autowired
        private articleService articleService;
    
        //博客图片上传问题
        @RequestMapping("/file/upload")
        @ResponseBody
        public JSONObject fileUpload(@RequestParam(value = "editormd-image-file", required = true) MultipartFile file, HttpServletRequest request) throws IOException { 
            //上传路径保存设置
    
            //获得SpringBoot当前项目的路径：System.getProperty("user.dir")
            String path = System.getProperty("user.dir")+"/upload/";
    
            //按照月份进行分类：
            Calendar instance = Calendar.getInstance();
            String month = (instance.get(Calendar.MONTH) + 1)+"月";
            path = path+month;
    
            File realPath = new File(path);
            if (!realPath.exists()){ 
                realPath.mkdirs();
            }
    
            //上传文件地址
            System.out.println("上传文件保存地址："+realPath);
    
            //解决文件名字问题：我们使用uuid;
            String filename = "pg-"+ UUID.randomUUID().toString().replaceAll("-", "")+".jpg";
            File newfile = new File(realPath, filename);
            //通过CommonsMultipartFile的方法直接写文件（注意这个时候）
            file.transferTo(newfile);
    
            //给editormd进行回调
            JSONObject res = new JSONObject();
            res.put("url","/upload/"+month+"/"+ filename);
            res.put("success", 1);
            res.put("message", "upload success!");
    
            return res;
        }
    }

--------------------

**将保存的文件使用适配器配置类**

@Configuration
    public class MvcConfig implements WebMvcConfigurer { 
    
        /** * 图片路径适配器 * @param registry */
        // 文件保存在真实物理路径/upload/下（即项目的物理地址下/upload/3月）
        // 访问的时候使用虚路径/upload，比如文件名为1.png，就直接/upload/1.png就ok了。
        @Override
        public void addResourceHandlers(ResourceHandlerRegistry registry) { 
            //将物理地址upload下的文件映射到/upload下
            //访问的时候就直接访问http://localhost:9000/upload/文件名
            registry.addResourceHandler("/upload/**").addResourceLocations("file:"+System.getProperty("user.dir")+"/upload/");
        }
    
    }

--------------------

# 四、展示 #

## 1. 书写 ##

![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5Zyo5LiL5piv5bCP55m9_size_20_color_FFFFFF_t_70_g_se_x_16 1]

## 2.展示 ##

![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5Zyo5LiL5piv5bCP55m9_size_20_color_FFFFFF_t_70_g_se_x_16 2]

[Link 1]: https://blog.csdn.net/K_kzj_K/article/details/105169711
[Link 2]: https://github.com/pandao/editor.md/archive/master.zip
[Markdown]: https://pandao.github.io/editor.md/
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5Zyo5LiL5piv5bCP55m9_size_14_color_FFFFFF_t_70_g_se_x_16]: /images/20220829/af7a797d6130475b9edc0a2d120ecdb4.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5Zyo5LiL5piv5bCP55m9_size_20_color_FFFFFF_t_70_g_se_x_16]: /images/20220829/1ec51a601ba94928a8145300ce43c7c2.png
[6a5f1fda83e84ec8990e890fc7f6d2ef.png]: /images/20220829/bee4103960e245fc90ab9f76e5a34fc9.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5Zyo5LiL5piv5bCP55m9_size_9_color_FFFFFF_t_70_g_se_x_16]: /images/20220829/fbbc8b138fc34f14b75e40bc9443731c.png
[f463fb5e25824f09a3157fc853e5e040.png]: /images/20220829/e4e58edb474647fba2cec65238bb946b.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5Zyo5LiL5piv5bCP55m9_size_20_color_FFFFFF_t_70_g_se_x_16 1]: /images/20220829/62c8e683cbc44f2fb9a8b5785ed075ac.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5Zyo5LiL5piv5bCP55m9_size_20_color_FFFFFF_t_70_g_se_x_16 2]: /images/20220829/cca029c4a0ba499ba78a44e24e4c9215.png