MarkDown简单使用

最新推荐文章于 2022-05-08 15:17:06 发布

小陈-程序员

最新推荐文章于 2022-05-08 15:17:06 发布

阅读量225

点赞数

分类专栏：组件文章标签： java

本文链接：https://blog.csdn.net/weixin_45229417/article/details/115921459

版权

组件专栏收录该内容

4 篇文章 0 订阅

订阅专栏

1.将MarkDown文件放入resources/static/ediormd中

2.编辑实现，将css依赖和默认的包导入，分为和底部

<head>
<link rel="stylesheet" th:href="@{/editormd/css/editormd.min.css}"  />
    <link rel="shortcut icon" href="https://pandao.github.io/editor.md/favicon.ico" type="image/x-icon" />
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-3.5.1.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<head/>

<script th:src="@{/editormd/editormd.min.js}" ></script>


<script type="text/javascript">
    var testEditor;

    //window.onload = function(){ }
    $(function() {
        testEditor = editormd("article-content", {
            width : "100%",
            height : 400,
            syncScrolling : "single",
            path : "../../editormd/lib/",
            // 自定义的增强配置！
            saveHTMLToTextarea : true,    // 保存 HTML 到 Textarea
            emoji: true, // 开启表情的功能！ 图片的本地配置！
            // theme: "light",//工具栏主题
            // previewTheme: "dark",//预览主题
            // editorTheme: "pastel-on-dark",//编辑主题
            // markdown的配置！
            tex : true,                   // 开启科学公式TeX语言支持，默认关闭
            flowChart : true,             // 开启流程图支持，默认关闭
            sequenceDiagram : true,       // 开启时序/序列图支持，默认关闭,
            //图片上传
            imageUpload    : true,
            imageFormats   : ["jpg", "jpeg", "gif", "png", "bmp", "webp"],
            imageUploadURL : "/file/uploads",

            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",
                    "releaseIcon", "index"]
            },
            // 这里的自定义功能就好比，Vue 组件

            /*自定义功能按钮，下面我自定义了2个，一个是发布，一个是返回首页*/
            toolbarIconTexts : {
                releaseIcon : "<span bgcolor=\"gray\">发布</span>",
                index : "<span bgcolor=\"red\">返回首页</span>",
            },

            /*给自定义按钮指定回调函数*/
            toolbarHandlers:{
                releaseIcon : function(cm, icon, cursor, selection) {
                    //表单提交
                    mdEditorForm.method = "post";
                    mdEditorForm.action = "/article/Insertarticle";//提交至服务器的路径
                    mdEditorForm.submit();
                },
                index : function(){
                    window.location.href = '/';
                },
            }
        });
    });
</script>

3.撰写图片上传的Controller

import com.alibaba.fastjson.JSONObject;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.multipart.MultipartFile;
import javax.servlet.http.HttpServletRequest;
import java.io.File;
import java.io.IOException;
import java.util.Calendar;
import java.util.UUID;
@Controller
public class FileUploadController {
    @RequestMapping("/file/uploads")
    @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)+"month";
        path = path+month;

        File realPath = new File(path);
        if (!realPath.exists()){
            realPath.mkdirs();
        }

        //上传文件地址
        System.out.println("上传文件保存地址："+realPath);

        //解决文件名字问题：我们使用uuid;
        String filename = "ks-"+ UUID.randomUUID().toString().replaceAll("-", "")+".jpg";
        //通过CommonsMultipartFile的方法直接写文件（注意这个时候）
        file.transferTo(new File(realPath +"/"+ filename));

        //给editormd进行回调
        JSONObject res = new JSONObject();
        res.put("url","/upload/"+month+"/"+ filename);
        res.put("success", 1);
        res.put("message", "upload success!");

        return res;
    }

}

4.撰写Controller类

@Controller
@RequestMapping("/article")
public class ArticleController {
    @PostMapping("/Insertarticle")
    //假如不添加，会出现模板引擎找不到
    private String InsertArticle(ArticleDto articleDto, @AuthenticationPrincipal UserDetails user){

        User users = UserService.getUserByUserName(user.getUsername());
        Article article=Article.builder().content(articleDto.getContent())
                .title(articleDto.getTitle())
                .title_picture(articleDto.getTitle_picture())
                .user_id(users.getUser_id())
                .build();

        articleService.insertArticle(article);
        return "redirect:/article/addarticleview";
    }
}

5 获取服务数据到前端页面显示markdown

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

<!--固定editormd依赖！ -->
<script type="text/javascript"src="http://code.jquery.com/jquery-1.4.1.min.js"></script>
<script th:src="@{/editormd/editormd.min.js}" ></script>
<script th:src="@{/editormd/lib/marked.min.js}" ></script>
<script th:src="@{/editormd/lib/prettify.min.js}"></script>
<script src="//unpkg.com/layui@2.6.4/dist/layui.js"></script>

<script type="text/javascript">

        $(function() {
            var testView = editormd.markdownToHTML("test-markdown-view", {
                // markdown : "[TOC]\n### Hello world!\n## Heading 2", // Also, you can dynamic set Markdown text
                // htmlDecode : true,  // Enable / disable HTML tag encode.
                // htmlDecode : "style,script,iframe",  // Note: If enabled, you should filter some dangerous HTML tags for website security.
                htmlDecode: "style,script,iframe",
                emoji: true,
                taskList: true,
                tocm: true,
                tex: true, // 默认不解析
                // flowChart: true, // 默认不解析
                // sequenceDiagram: true, // 默认不解析
                codeFold: true


            });
        });
</script>

前端页面

  <div class="card">
                    <div class="card-body">
                        <div class="row">
                            <div class="page-header"  style="padding-left:30px">
                                <h1 th:text="${article.title}"><small></small></h1>
                            </div>
                        </div>
                        <div id="test-markdown-view">
                            <!-- Server-side output Markdown text -->
                            <textarea style="display:none;" th:text="${article.content}"></textarea>
                        </div>
                    </div>
                </div>

6 markdown编辑器可以在文件下查看，在readme中查看参数

在这里插入图片描述
markdown的目录

7.下载地址

https://github.com/pandao/editor.md

8 总结

假如导入的时候发生页面空白，极大可能为css和sript导入的时候出错，可以自行下载源css和script。

小陈-程序员

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
MarkDown简单使用

1.将MarkDown文件放入resources/static/ediormd中2.编辑实现，将css依赖和默认的包导入，分为和底部<head><link rel="stylesheet" th:href="@{/editormd/css/editormd.min.css}" /> <link rel="shortcut icon" href="https://pandao.github.io/editor.md/favicon.ico" type="image
复制链接

扫一扫