Markdown如何在Web项目中使用

Source

现在很多平台写文章都是使用的Markdown编辑器。曾几何时,我们是否也想过把Markdown运用到自己的项目中。这不,最近项目需要一个新闻管理的功能,我毫不犹豫的选择的时下最火Markdown来完成。下面来一起看一下具体的实现吧!!!


准备工作

在使用之前当然是需要先下载对应的插件,下载地址:https://pandao.github.io/editor.md/index.html
下载完成后引入需要的文件

<link rel="stylesheet" type="text/css" href="static/editor/css/editormd.css"/>
<script src="static/js/jquery.js"></script>
<script src="static/editor/editormd.js" type="text/javascript"></script>

Markdown的实现

页面只需要放一个div和一个textarea标签即可,之后用JS来渲染。
HTML部分代码:

<div id="editormd">
    <textarea id = "text" style="display:none;" ></textarea>
</div>

注意: div中的id是用来渲染Markdown编辑器时使用的,textarea是获取编辑器中内容时使用的。

JS部分代码

<script type="text/javascript">
    $(function() {
        editormd("editormd", {
            width: "100%",
            height: 600,
            syncScrolling: "single",
            path: "static/editor/lib/", //依赖lib文件夹路径
            emoji: true,
            taskList: true,
            tocm: true,
            imageUpload: true,	//开启本地图片上传
            imageFormats: ["jpg", "jpeg", "gif", "png"],	//设置上传图片的格式
            imageUploadURL: "notice/imgUpdate"		//上传图片请求路径
        });
    });
</script>

注意: editormd为页面中div的id。
path: “static/editor/lib/”,需要指定到editor文件夹的lib路径。
在这里插入图片描述
imageUploadURL: “notice/imgUpdate”,设置上传图片的请求地址。
后台imgUpdate方法代码如下。

/**
 * 图片上传
 * @param file
 * @return
 */
@RequestMapping("/imgUpdate")
@ResponseBody
public Map<String, Object> imgUpdate(@RequestParam(value = "editormd-image-file", required = true) MultipartFile file){
    String uuid = UUID.randomUUID().toString()+".jpg";
    Boolean bool = fileService.saveFile(file, uuid);
    Map<String, Object> map = new HashMap<>();
    if(bool) {
        map.put("success", 1);
        map.put("message", "上传成功");
        map.put("url", "http://localhost/layEdit/download?uuid="+uuid);
    }else {
        map.put("success", 0);
        map.put("message", "失败");
    }
    return map;
}

/**
 * 图片下载
 * @param uuid
 * @param request
 * @param response
 */
@RequestMapping(value = "/download")
@ResponseBody
private void download(String uuid, HttpServletRequest request, HttpServletResponse response) {
    fileService.download(uuid, request, response);
}

注: saveFile和download方法为图片上传和下载方法。
Markdown图片上传完成后需要返回对应格式的JSON信息。
message: 提示信息(字符串)
success: 上传成功或失败,1成功 | 0失败
url: 图片下载地址(用于图片回显)

至此完整的Markdown就完全实现了,效果如下:
在这里插入图片描述

获取内容

Markdown编辑器在我们写文章时已经把内容自动同步到了之前我们定义的textarea标签中了(这一块Markdown做的很好,有些编辑器还需要自己把内容同步到标签中)。
在这里插入图片描述
既然Markdown已经自动帮我们把内容同步到了textarea标签中了,那我们就可以直接通过textarea标签的id值获取textarea标签内的内容,即编辑器中内容。代码如下:

function btnSave() {
    var text = $("#text").text();
    console.log(text);

    $.post("layEdit/save", {text: text}, function (result) {
        layer.msg(result.msg, {offset: 'rb'});
    });
}

在此方法中可以对内容进行保存,也可以使用form表单提交保存。
在这里插入图片描述
到这里,编辑器中的内容都已经获取到了,保存方法这里就不写了。
这里需要注意的是:由于富文本内容有可能过多,数据库保存该字段,不能用String类型,长度不够,MySQL数据库可以用longtext类型。

页面显示

上面我们也看到了,在保存数据时,我们保存到数据库中的是Markdown的语法,而并不是HTML语法,所以不能直接显示在页面上。
如何直接显示在页面上,后果则是:
在这里插入图片描述
显然不能直接显示在页面上,需要把Markdown的语法先转成HTML语法在显示。
那么问题来了,如何转呢?我们需要引入以下几个JS(都是Markdown插件中的文件)

<script src="../static/js/jquery.js"></script>
<script src="../static/editor/lib/marked.min.js"></script>
<script src="../static/editor/lib/prettify.min.js"></script>
<script src="../static/editor/lib/raphael.min.js"></script>
<script src="../static/editor/lib/underscore.min.js"></script>
<script src="../static/editor/lib/sequence-diagram.min.js"></script>
<script src="../static/editor/lib/flowchart.min.js"></script>
<script src="../static/editor/lib/jquery.flowchart.min.js"></script>
<script src="../static/editor/editormd.js"></script>

页面同样只需要div和textarea标签。之后通过JS来吧Markdown的语法转换为HTML语法显示。代码如下:

<div id="test">
    <textarea style="display:none;" th:text="${model.text}"></textarea>
</div>

<script type="text/javascript">
    editormd.markdownToHTML("test", {
        htmlDecode: "style,script,iframe",
        emoji: true,
        taskList: true,
        tex: true,  // 默认不解析
        flowChart: true,  // 默认不解析
        sequenceDiagram: true  // 默认不解析
    });
</script>

其中th:text="${model.text}"为后台传递过来的Markdown语法。
显示效果如下:
在这里插入图片描述
到这里Markdown的使用就讲完了。
创作不易,各位的点赞是对我最大的鼓励。欢迎下方留言交流,期待与各位的交流。

发布了116 篇原创文章 · 获赞 232 · 访问量 13万+