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编辑器的实现就完成了。