markdown格式editor富文本，用于写博客用（带图片上传）

当我们想要一个可以写博客的编辑器的话，editor编辑器是一个不错的选择，本博客网站正是使用此编辑器编写博客

首先引入必要的js和css文件

<link rel="stylesheet" th:href="@{/editor/css/editormd.css}">
<link rel="shortcut icon" href="https://pandao.github.io/editor.md/favicon.ico" type="image/x-icon"/>

<script th:src="@{/editor/jquery.min.js}"></script>
<script th:src="@{/editor/editormd.min.js}"></script>

html前端代码

               <div class="editormd" id="test-editormd" style="margin-top: 10px">
                       <textarea class="editormd-markdown-textarea"
                          name="test-editormd-markdown-doc" id="content"
                          th:text="${article.articleContentMd}"></textarea>
                       <!-- 第二个隐藏文本域，用来构造生成的HTML代码，方便表单POST提交，这里的name可以任意取，后台接受时以这个name键为准 -->
                       <textarea class="editormd-html-textarea" name="editormd-html-textarea" id="htmlContent"></textarea>
              </div>

在底部开启editor

$(function () {
     editormd("test-editormd", {
         width: "100%",
         height: 840,
         syncScrolling: "single",
         emoji: true,
         //你的lib目录的路径
         tocm: true, // Using [TOCM]
         htmlDecode: "style,script,iframe|on*",//这个属性开启可以支持字体颜色大小更改，开启 HTML 标签解析，为了安全性，默认不开启
         taskList: true,
         tex: true, // 开启科学公式TeX语言支持，默认关闭
         flowChart: true, // 开启流程图支持，默认关闭
         imageUpload: true,
         imageFormats: ["jpg", "jpeg", "gif", "png", "bmp", "webp"],
         imageUploadURL: "/markdown",
         path: "/editor/lib/",
         //这个配置在simple.html中并没有，但是为了能够提交表单，使用这个配置可以让构造出来的HTML代码直接在第二个隐藏的textarea域中，方便post提交表单。
         saveHTMLToTextarea: true
     });
     /*下一步和上一步操作*/
     $("#next,#last").click(
         function () {
             $("#first").toggle();
             $("#second").toggle();
         }
     );

后台接收代码Controller层：

@RequestMapping(value = "/articleAdd", method = RequestMethod.POST)
    private String articleAdd(RedirectAttributes redirectAttributes, Model model, Articles articles, HttpServletRequest request, @RequestParam(required = false) String status) {

        /*判断是否启用博文*/
        if (status == null || status.length() == 0) {
            articles.setArticleStatus(0);
        } else {
            articles.setArticleStatus(1);
        }
        /*暂时设置用户为1*/
        articles.setUserId(1L);
        /*博文内容机器mark格式单独获取*/
        articles.setArticleContent(request.getParameter("editormd-html-textarea"));
        articles.setArticleContentMd(request.getParameter("test-editormd-markdown-doc"));
        /*设置时间*/
        articles.setArticleUpdateTime(new Date());
        articles.setArticleCreateTime(new Date());
        /*分类列表*/
        String[] sortCheckboxes = request.getParameterValues("sortCheckbox");
        /*标签列表*/
        String[] labelCheckboxes = request.getParameterValues("labelCheckbox");
        /*单独判断分类标签，不然会报空指针异常*/
        if (sortCheckboxes == null||labelCheckboxes==null) {
            //model.addAttribute("sortCheckboxes",sortCheckboxes);
            //model.addAttribute("labelCheckboxes",labelCheckboxes);
            model.addAttribute("article", articles);
            model.addAttribute("sortsList", sortService.list());
            model.addAttribute("labelsList", labelService.list());
            model.addAttribute("messages","至少选择一个分类或分类");
            return "admin/article/article_add";
        }

图片写入

    @ResponseBody
    @RequestMapping(value = "/markdown", method = RequestMethod.POST)
    public Map<String, Object> demo(@RequestParam(value = "editormd-image-file", required = false) MultipartFile file, HttpServletRequest request) {
       //前面提及过图片的上传
        return uploadFileUtil(file);

    }

再次回显到前台代码

在文本域中写一下代码：
th:text="${article.articleContentMd}"