Loading... # 1. 安装 ```javascript 官网下载, 解压, 移到自己的项目静态目录即可 ``` # 2. 使用 * 前端部分 ```javascript <div id="my-editormd"> <textarea class="editormd-markdown-textarea" name="doc" style="display:none;"></textarea> <!-- 第二个隐藏文本域，用来构造生成的HTML代码，方便表单POST提交，这里的name可以任意取，后台接受时以这个name键为准 --> <textarea class="editormd-html-textarea" name="html"></textarea> </div> <script type="text/javascript"> var testEditor; $(function () { testEditor = editormd("my-editormd", { width: "90%", height: 640, syncScrolling: "single", path: "../lib/", //这个配置在simple.html中并没有，但是为了能够提交表单，使用这个配置可以让构造出来的HTML代码直接在第二个隐藏的textarea域中，方便post提交表单。 saveHTMLToTextarea: true, imageUpload: true, imageFormats : ["jpg", "jpeg", "gif", "png", "bmp", "webp"], imageUploadURL : "/uploadImage",//注意你后端的上传图片服务地址 onload: function(){ this.width("100%"); this.height(480); } }); }); </script> // 这个注意, 网上很多教程都是直接通过getHTML()方法来取值,实际上作用域限制是取不到的; var content = $('.editormd-markdown-textarea').val(); ``` * 后端接收 ```javascript //发布项目后改为项目地址 private static String UPLOADED_FOLDER = "F:\\ideaTest\\gakki\\src\\main\\webapp\\image\\"; @RequestMapping("/uploadimg") public Map<String, Object> editormdPic(@RequestParam(value = "editormd-image-file", required = false) MultipartFile file, HttpServletRequest request) throws Exception { Map<String, Object> resultMap = new HashMap<>(); String fileName = file.getOriginalFilename();// 获取文件名 String suffixName = fileName.substring(fileName.lastIndexOf("."));// 获取文件的后缀 String newFileName = DateUtil.getCurrentDateStr() + suffixName; try { FileUtils.copyInputStreamToFile(file.getInputStream(), new File(UPLOADED_FOLDER + newFileName)); resultMap.put("success", 1); resultMap.put("message", "上传成功！"); resultMap.put("url", "http://localhost:8888/image/" + newFileName); } catch (Exception e) { resultMap.put("success", 0); resultMap.put("message", "上传失败！"); e.printStackTrace(); } return resultMap; } ``` ## 需要注意的问题 在首次编辑时，是使用markdown给定的js方法，构造的编辑区域，但是要修改已经编辑的内容时，怎么把数据回显到页面？后台传来的数据怎么放置合适？后台传的需要时什么格式？为什么使用> ，接受内容，为何不是别的？ 1. 页面内容 | ``` <div class="blogtit"> <input type="text" placeholder="请输入博客名称" name="title" id="title" th:value="${blog.blTitle}" /> </div> <!--class="editormd"--> <div id="test-editormd"> <textarea style="display:none;" name="test-editormd-markdown-doc" id="content" th:text="${blog.blContent}" ></textarea> <!--第二个隐藏文本域，用来构造生成的HTML代码，方便表单POST提交，这里的name可以任意取，后台接受时以这个name键为准 --> <!--<textarea class="editormd-html-textarea" name="text" id="htmlContent"></textarea>--> </div> ``` | | | --- | md文件编辑器 构造了`textarea` 存放了`md格式`和`html格式`的文件，所以使用它这个构造的内容来存放，后来返回的数据，至于html格式的数据,md的js会自动解析。所以后台需要存储一个md格式的字段，如果想要修改博客，则只需要`把md格式传到前台`。正如我的页面代码所示，第一个textarea可以接收md格式的代码并自动生成md编辑器的格式，此时需要将第二个textarea注释。 下面就是需要修改的文本再次回显到页面： [](http://michael001.cn/usr/uploads/2021/04/3932932930.png) 2. 修改文章, 需要回显md格式并默认显示时, ``` 需要将md格式的内容提前写到textarea中, 编辑器会预读并默认显示: {% block article_content %} <div class="editormd" id="testeditor"> <textarea id="article-content" style="display: none;">{{ article_queryset.content_md }}</textarea> </div> {% endblock %} ``` © 允许规范转载