前言
个人编写的博客原来采用的是KindEditor富文本编辑器来编写我的个人博客的内容的，但是我发现了，虽然，我在我的自己的网站编写好了文章的格式，但是发布到其他的网站（比如：CSDN）的时候，就会出现格式不正确的情况，这时候我想到了markdown，因为，markdown的编写很多网站都在使用，这样的话，我把我编写的内容直接复制过去就好了。那么，下面介绍网站如何集成markdown编辑器。
正文
今天的主题：网站集成markdown编辑器和解析的整体性的配置过程
第一步
首先访问 https://pandao.github.io/editor.md/ 的网站下载该项目
之后集成到项目中如上面的图所示
之后编辑网页设置初始化参数，使他能够运行在网页上
<link rel="stylesheet" href="editormd/css/editormd.css"/> <link rel="stylesheet" href="/layui/css/layui.css"></link> <script src="https://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script> <script src="editormd/editormd.min.js"></script> <div id="test-editor"> <textarea style="display:none;" name="test-editor-markdown-doc" lay-filter="test-editor-markdown-doc"></textarea> </div> var editor = editormd("test-editor", { // width : "100%", height: 250, path: "editormd/lib/", saveHTMLToTextarea: true,//这个配置，方便post提交表单，表单字段会自动加上一个字段content-html-code,形式为html格式 /**上传图片相关配置如下*/ imageUpload: true, imageFormats: ["jpg", "jpeg", "gif", "png", "bmp", "webp"], imageUploadURL: "/blog/v1/file/uploadImageForMd",//注意你后端的上传图片服务地址 });
之后进行请求后台保存数据
/** * 新增加 文章 * * @return */ @PostMapping("/save") public Object saveTopic(@RequestParam("topicName") String topicTile, @RequestParam("topicDesc") String topicDesc, @RequestParam("test-editor-markdown-doc") String topicText, @RequestParam("topicType") String topicCategory, LoginUserDto loginUserDto) { if (null == loginUserDto) { return null; } try { Object insert = topicService.insert(topicTile, topicDesc, topicText, topicCategory, loginUserDto); return ResponseResult.createOK(insert); } catch (Exception e) { return ResponseResult.createFailResult("操作失败", e.getMessage()); } }
第二步
前台的展示
<div id="test-editormd-view2" style="padding: 0px;margin: 0px;"> <textarea id="append-test" style="display:none;" th:text="${topicInfo.currentTopic.topicText}">###Hello world! <link rel="stylesheet" href="/editormd/css/editormd.preview.css" /> <script src="/editormd/lib/marked.min.js"></script> <script src="/editormd/lib/prettify.min.js"></script> <script src="/editormd/lib/raphael.min.js"></script> <script src="/editormd/lib/underscore.min.js"></script> <script src="/editormd/lib/sequence-diagram.min.js"></script> <script src="/editormd/lib/flowchart.min.js"></script> <script src="/editormd/lib/jquery.flowchart.min.js"></script> <script src="/editormd/editormd.js"></script> <script type="text/javascript"> $(function() { var testEditormdView, testEditormdView2; testEditormdView2 = editormd.markdownToHTML("test-editormd-view2", { htmlDecode : "style,script,iframe", // you can filter tags decode emoji : true, taskList : true, tex : true, // 默认不解析 flowChart : true, // 默认不解析 sequenceDiagram : true, // 默认不解析 }); }); </script>
这样，我们就实现了markdown的集成工作
