SpringBoot整合MarkDown

清疚 2022-12-27 11:11 112阅读 0赞

### SpringBoot整合MarkDown ###

*  下载MarkDown的资源包
 *  修改html代码
 *  controller类
 *  调试
 *  测试

# 下载MarkDown的资源包 #

在项目resources/static目录下创建一个editormd目录、同时在resources/templates下创建一个editor目录，在templates的editor目录下新建一个editormd.html文件（作为编辑页面），将资源包的examples目录中的simple.html的代码内容拷贝进去，最后把整个资源包都导入static的editormd目录下，结构如下，bootstrap和jquery这些导入自己导，这里不展开  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDYyNDQxMA_size_16_color_FFFFFF_t_70]

# 修改html代码 #

接着在editormd.html页面中用th命名空间改写editormd.html文件的js和css的引入（具体路径看自己项目）

还要改写editormd.html中的function内容的path

$(function() {
        testEditor = editormd("test-editormd", {
            width: "90%",
            height: 640,
            syncScrolling: "single",
            path: "../editormd/lib/"
        });
    });

**注意！！！**  
path修改后要记得用 / 结尾，不然最后加载一些文件时 lib会和文件名合并，然后就找不到这个奇怪的文件了,例如 libmarked.min.js，其实是 marked.min.js  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDYyNDQxMA_size_16_color_FFFFFF_t_70 1]

# controller类 #

添加一个controller跳转过去，访问http://localhost:8080/editor/editormd启动测试一波

import org.springframework.stereotype.Controller;
    import org.springframework.web.bind.annotation.RequestMapping;
    
    @Controller
    public class editorController { 
        @RequestMapping("/editor")
        public String editor(){ 
            return "editor/editormd";
        }
    }

# 调试 #

因为开头导入了整个资源包，一般不会出现还缺少什么资源，出现获取不到的原因多数为资源获取的地方和存放的地方不一致，通过F12调试发现需要哪些静态资源

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDYyNDQxMA_size_16_color_FFFFFF_t_70 2]  
例如那些 font…的资源，查看浏览器会去哪里获取资源，然后找到相应资源放到相应的路径下  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDYyNDQxMA_size_16_color_FFFFFF_t_70 3]

这里就需要把fontawesome-webfont.woff2?v=4.3.0放到到resources/static/editormd/fonts下

# 测试 #

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

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDYyNDQxMA_size_16_color_FFFFFF_t_70]: /images/20221120/2cf6a0da7b1a4ae4aa2ca338a0f1f75d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDYyNDQxMA_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/202012101531064.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDYyNDQxMA==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDYyNDQxMA_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20201210155519553.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDYyNDQxMA==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDYyNDQxMA_size_16_color_FFFFFF_t_70 3]: https://img-blog.csdnimg.cn/20201210160829811.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDYyNDQxMA==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDYyNDQxMA_size_16_color_FFFFFF_t_70 4]: https://img-blog.csdnimg.cn/20201210161615559.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDYyNDQxMA==,size_16,color_FFFFFF,t_70