网站整合Markdown编辑器的实现教程

时间:2021-11-24
类别:教程 - 网页设计

Markdown 编辑器一直以来普遍流行的双窗口结构(一窗编辑,一窗预览),对于复杂的排版编辑来说是非常好用的编辑器,对于一些知名的大厂是一直都在使用的编辑器,是不是感觉很厉害!下面来一起看一下网站整合Markdown编辑器的实现教程吧!

一、准备工作

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

下载完成后引入需要的文件,代码如下:

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

二、Markdown的实现

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

HTML部分代码:

  1. <div id="editormd"
  2.  
  3.     <textarea id = "text" style="display:none;" ></textarea> 
  4.  
  5. </div> 

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

JS部分代码:

  1. <script type="text/javascript"
  2.  
  3.     $(function() { 
  4.  
  5.         editormd("editormd", { 
  6.  
  7.             width: "100%"
  8.  
  9.             height: 600, 
  10.  
  11.             syncScrolling: "single"
  12.  
  13.             path: "static/editor/lib/"//依赖lib文件夹路径 
  14.  
  15.             emoji: true, 
  16.  
  17.             taskList: true, 
  18.  
  19.             tocm: true, 
  20.  
  21.             imageUpload: true,  //开启本地图片上传 
  22.  
  23.             imageFormats: ["jpg""jpeg""gif""png"],    //设置上传图片的格式 
  24.  
  25.             imageUploadURL: "notice/imgUpdate"      //上传图片请求路径 
  26.  
  27.         }); 
  28.  
  29.     }); 
  30.  
  31. </script> 

注意: editormd为页面中div的id。

path: “static/editor/lib/”,需要指定到editor文件夹的lib路径。

网站整合Markdown编辑器的实现教程

imageUploadURL: “notice/imgUpdate”,设置上传图片的请求地址。

后台imgUpdate方法代码如下。

  1. /** 
  2.  
  3.  * 图片上传 
  4.  
  5.  * @param file 
  6.  
  7.  * @return 
  8.  
  9.  */ 
  10.  
  11. @RequestMapping("/imgUpdate"
  12.  
  13. @ResponseBody 
  14.  
  15. public Map<String, Object> imgUpdate(@RequestParam(value = "editormd-image-file", required = true) MultipartFile file){ 
  16.  
  17.     String uuid = UUID.randomUUID().toString()+".jpg"
  18.  
  19.     Boolean bool = fileService.saveFile(file, uuid); 
  20.  
  21.     Map<String, Object> map = new HashMap<>(); 
  22.  
  23.     if(bool) { 
  24.  
  25.         map.put("success", 1); 
  26.  
  27.         map.put("message""上传成功"); 
  28.  
  29.         map.put("url""http://localhost/layEdit/download?uuid="+uuid); 
  30.  
  31.     }else { 
  32.  
  33.         map.put("success", 0); 
  34.  
  35.         map.put("message""失败"); 
  36.  
  37.     } 
  38.  
  39.     return map; 
  40.  
  41.  
  42.  
  43.  
  44. /** 
  45.  
  46.  * 图片下载 
  47.  
  48.  * @param uuid 
  49.  
  50.  * @param request 
  51.  
  52.  * @param response 
  53.  
  54.  */ 
  55.  
  56. @RequestMapping(value = "/download"
  57.  
  58. @ResponseBody 
  59.  
  60. private void download(String uuid, HttpServletRequest request, HttpServletResponse response) { 
  61.  
  62.     fileService.download(uuid, request, response); 
  63.  

注: saveFile和download方法为图片上传和下载方法。

Markdown图片上传完成后需要返回对应格式的JSON信息。

message: 提示信息(字符串)

success: 上传成功或失败,1成功 | 0失败

url: 图片下载地址(用于图片回显

至此完整的Markdown就完全实现了,效果如下:

网站整合Markdown编辑器的实现教程

三、获取内容

Markdown编辑器在我们写文章时已经把内容自动同步到了之前我们定义的textarea标签中了(这一块Markdown做的很好,有些编辑器还需要自己把内容同步到标签中)。

网站整合Markdown编辑器的实现教程

既然Markdown已经自动帮我们把内容同步到了textarea标签中了,那我们就可以直接通过textarea标签的id值获取textarea标签内的内容,即编辑器中内容。代码如下:

  1. function btnSave() { 
  2.  
  3.     var text = $("#text").text(); 
  4.  
  5.     console.log(text); 
  6.  
  7.  
  8.  
  9.     $.post("layEdit/save", {text: text}, function (result) { 
  10.  
  11.         layer.msg(result.msg, {offset: 'rb'}); 
  12.  
  13.     }); 
  14.  

在此方法中可以对内容进行保存,也可以使用form表单提交保存。

网站整合Markdown编辑器的实现教程

到这里,编辑器中的内容都已经获取到了,保存方法这里就不写了。

这里需要注意的是:由于富文本内容有可能过多,数据库保存该字段,不能用String类型,长度不够,MySQL数据库可以用longtext类型。

四、最终页面显示

上面我们也看到了,在保存数据时,我们保存到数据库中的是Markdown的语法,而并不是HTML语法,所以不能直接显示在页面上。

如何直接显示在页面上,后果则是:

网站整合Markdown编辑器的实现教程

显然不能直接显示在页面上,需要把Markdown的语法先转成HTML语法在显示。

那么问题来了,如何转呢?我们需要引入以下几个JS(都是Markdown插件中的文件)

  1. <script src="../static/js/jquery.js"></script> 
  2.  
  3. <script src="../static/editor/lib/marked.min.js"></script> 
  4.  
  5. <script src="../static/editor/lib/prettify.min.js"></script> 
  6.  
  7. <script src="../static/editor/lib/raphael.min.js"></script> 
  8.  
  9. <script src="../static/editor/lib/underscore.min.js"></script> 
  10.  
  11. <script src="../static/editor/lib/sequence-diagram.min.js"></script> 
  12.  
  13. <script src="../static/editor/lib/flowchart.min.js"></script> 
  14.  
  15. <script src="../static/editor/lib/jquery.flowchart.min.js"></script> 
  16.  
  17. <script src="../static/editor/editormd.js"></script> 

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

  1. <div id="test"
  2.  
  3.     <textarea style="display:none;" th:text="${model.text}"></textarea> 
  4.  
  5. </div> 
  6.  
  7.  
  8.  
  9. <script type="text/javascript"
  10.  
  11.     editormd.markdownToHTML("test", { 
  12.  
  13.         htmlDecode: "style,script,iframe"
  14.  
  15.         emoji: true, 
  16.  
  17.         taskList: true, 
  18.  
  19.         tex: true,  // 默认不解析 
  20.  
  21.         flowChart: true,  // 默认不解析 
  22.  
  23.         sequenceDiagram: true  // 默认不解析 
  24.  
  25.     }); 
  26.  
  27. </script> 

其中th:text="${model.text}"为后台传递过来的Markdown语法。

显示效果如下:

网站整合Markdown编辑器的实现教程

到这里网站整合Markdown编辑器的实现就完成了。

    收藏