SpringBoot+Editormd实现markdown文本编辑和图片上传

  富文本编辑是开发过程中常用的功能之一，而markdown是开发人员最亲睐的编辑格式，此刻，我也正在使用CSDN的markdown编辑器进行编辑。刚好有了一些想法，所以实现了这个功能。

Markdown文本编辑功能实现

Editormd项目地址,Editormd的基本实现非常简单，只需要在html中引入必要的css文件（此处使用了thymeleaf）

    <meta charset="utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <meta name="viewport" content="width=device-width, initial-scale=1"/>
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>Edit</title>
    <link rel="stylesheet" th:href="@{/css/style.css}"
          href="/css/style.css"/>
    <link rel="stylesheet" th:href="@{/editormd/css/editormd.css}"
          href="/editormd/css/editormd.css"/>
    <link rel="shortcut icon" href="https://pandao.github.io/editor.md/favicon.ico" type="image/x-icon"/>

在html中写上两个带有明确class：editormd-markdown-textarea和editormd-html-textarea的标签

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

最后我们进行引入js后进行初始化操作即可

<script th:src="@{/js/jquery.min.js}" src="/js/jquery.min.js"></script>
<script th:src="@{/editormd/js/editormd.js}" src="/editormd/js/editormd.js"></script>
<script type="text/javascript">
    $(function() {
        editormd("test-editormd", {
            width   : "90%",
            height  : 640,
            syncScrolling : "single",
            //你的lib目录的路径，我这边用JSP做测试的
            tocm : true, // Using [TOCM]
            tex : true, // 开启科学公式TeX语言支持，默认关闭
            flowChart : true, // 开启流程图支持，默认关闭
            path    : "/editormd/lib/",
            //这个配置在simple.html中并没有，但是为了能够提交表单，使用这个配置可以让构造出来的HTML代码直接在第二个隐藏的textarea域中，方便post提交表单。
            saveHTMLToTextarea : true
        });
    });

此时我们在后台中写添加

    @RequestMapping("edit")
    public String   editor(){
        return "edit";
    }

可见如下效果

当我们添加基本的java对象并且在html中添加按钮之后我们就可以将数据传递到后台了。

 @Id // 主键
    @GeneratedValue(strategy = GenerationType.IDENTITY) // 自增长策略
    private Long id; // 用户的唯一标识

    //@NotEmpty(message = "标题不能为空")
    @Column(nullable = false, length = 50) // 映射为字段，值不能为空
    private String title;

   //@NotEmpty(message = "摘要不能为空")
    @Column(nullable = false) // 映射为字段，值不能为空
    private String summary;

    @Lob  // 大对象，映射 MySQL 的 Long Text 类型

    //@NotEmpty(message = "内容不能为空")
    @Column(nullable = false) // 映射为字段，值不能为空
    private String content;
    @Lob  // 大对象，映射 MySQL 的 Long Text 类型
    //@NotEmpty(message = "内容不能为空")
    @Column(nullable = false) // 映射为字段，值不能为空
    private String htmlContent; // 将 md 转为 html
    public Long getId() {
        return id;
    }
    //省略get，set方法

js中添加

     $("#submitBtn").click(
            function () {
                alert("点击按钮了");
                submitblog();
            }
        )
        function submitblog() {
            var  title = $("#title").val();
            var content = $("#content").val();
            var htmlContent = $("#htmlContent").val();
            $.ajax({
                url: "submit",
                data: {title: title, content:content,htmlContent:htmlContent},
                success:function () {
                    alert("发布成功");
                },
                error:function () {
                    alert("发布失败");
                }
            })
        }

Controller中添加接受方法

    @RequestMapping("submit")
    @ResponseBody
    public void    submit(Blog blog){
        System.out.println(blog.getContent());
        System.out.println(blog.getHtmlContent());
        blogRepository.save(blog);
    }

即可保存

实现文本上传功能

前端实现

Editormd的文本上传功能在前端的实现也非常简单，只需要在前端js初始化的代码中加入

            imageUpload : true,
            imageFormats : [ "jpg", "jpeg", "gif", "png", "bmp", "webp" ],
            imageUploadURL : "/uploadimg",
            onload: function () {
                //console.log('onload', this);
                //this.fullscreen();
                //this.unwatch();
                //this.watch().fullscreen();
                this.width("100%");
                this.height(480);
                //this.resize("100%", 640);
            }

onload方法为上传图片的回调方法，可以在这里设置图片的一些属性
但是实际测试过程中，发现这些属性并没有什么作用，网上也没有对应的例子。因此，这一步需要好好探究

后端实现

    @RequestMapping(value="/uploadimg")
    public @ResponseBody Map<String,Object> demo(@RequestParam(value = "editormd-image-file", required = false) MultipartFile file, HttpServletRequest request) {
        Map<String,Object> resultMap = new HashMap<String,Object>();
        System.out.println(request.getContextPath());
        String realPath = UPLOADED_FOLDER;
        String fileName = file.getOriginalFilename();
        System.out.println(fileName);
/*        File targetFile = new File(realPath, fileName);
        if(!targetFile.exists()){
            targetFile.mkdirs();
        }*/
        //保存
        try {
/*            file.transferTo(targetFile);*/
            byte[] bytes = file.getBytes();
            Path path = Paths.get(UPLOADED_FOLDER + file.getOriginalFilename());
            Files.write(path, bytes);
            resultMap.put("success", 1);
            resultMap.put("message", "上传成功！");
            resultMap.put("url",UPLOADED_FOLDER+fileName);
        } catch (Exception e) {
            resultMap.put("success", 0);
            resultMap.put("message", "上传失败！");
            e.printStackTrace();
        }
        System.out.println(resultMap.get("success"));
        return resultMap;


    }

此处有两个需要注意的点

• 由于SpringBoot自带的Tomcat的原因，导致图片无法上传到项目目录下，自带的Tomcat的临时目录的存取权限有问题，因此此处我们使用了一个指定目录
• Editormd前端规定了后台必须返回给前端一个map且形式为{“success”:1,message:”上传成功”,”url”:url}，这里需要注意一下。
• 其次，使用简单的file文件写入也许会存在问题，因此，我们这里采用了NIO的写入方式

           byte[] bytes = file.getBytes();
            Path path = Paths.get(UPLOADED_FOLDER + file.getOriginalFilename());
            Files.write(path, bytes);

代码地址