SpringBoot整合Editor.Md实现Markdown富文本编辑器

 
最近需要做一个后台管理,且需要有一个公告功能,可以实现图片上传等功能。于是,就想到了整合editor.md。本次后台管理是SpringBoot + Thymeleaf 实现的,ok,咱们搞起来。
首先简单了解一下什么是editro.md,详情点击这里,点进去之后,是editor.md的github地址。
 
说明一下:这里我主要介绍的是:SpringBoot如何整合editor.md实现富文本编辑功能。
 
通过github我们可以看到,他有一个examples目录,顾名思义就是使用示例,直接把整合项目下载下来,然后进入到examples目录,可以看到很多.html页面,直接打开就可以使用了。
那么,如何整合项目中来呢?
 
首先,需要把editor.md需要的静态资源文件下载放到项目的static目录下;
然后,把他的示例代码部分复制过来就行。
最后根据自己本地项目修改一下静态资源引入路径就好了;
 
第一步的静态资源引入
我几乎把需要的和不需要的都资源文件都引入了,具体我就不截图了,太麻烦,我直接给个百度云盘链接,大家拿来就能用。点我下载editor.md所需静态资源文件,提取码 6666。下载解压之后,把解压后的文件放到resources下的static目录说下就行。
 
第二步项目代码部分
我在resources的templates目录下新建了一个test.html页面,页面代码如下:


<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8"/>
    <title>Emoji - Editor.md examples</title>
    <!--引入所需依赖-->
    <link rel="stylesheet" href="../static/editormd/css/style.css"
          th:href="@{/editormd/css/style.css}"/>
    <link rel="stylesheet" href="../static/editormd/css/editormd.css"
          th:href="@{/editormd/css/editormd.css}"/>
</head>
<body>


<h1>EditorMD</h1>


<!--这里的id=editormd_id就是下面的初始化editorMD的editormd_id-->
<div id="editormd_id">
    <!-- 第一个textarea是文本输入区域-->
    <textarea id="htmlContent" class="editorMd-html-textarea" name="editorMd-html-textarea" placeholder="请输入内容...">
    </textarea>


    <!--第二个textarea 是展示文本区域 要隐藏起来 display->none-->
    <textarea class="editorMd-text-textarea" name="editorMd-text-textarea" style="display:none;" id="textContent">
    </textarea>
</div>


<!--引入所需依赖-->
<script src="../static/editormd/js/jquery.min.js"
        th:src="@{/editormd/js/jquery.min.js}"></script>
<script src="../static/editormd/editormd.js"
        th:src="@{/editormd/editormd.js}"></script>
<script>


    //初始化editorMD
    let testEditor;
    $(function () {
        testEditor = editormd("editormd_id", {
            width: "90%",
            height: 720,
            toc: true,
            emoji: true,//表情功能开启
            taskList: true,
            syncScrolling: "single",
            imageUpload: true,
            imageFormats: ["jpg", "jpeg", "gif", "png", "bmp", "webp"],
            imageUploadURL: "/uploadImg",       //图片上传URL 即后台的图片上传接口URL
            path: '/editormd/lib/',          //项目启动路径
            //path: '../static/editormd/lib/',    //本地路径
            saveHTMLToTextarea: true
        });
    });
</script>
</body>
</html>

 

然后是后台接口,其实就一个图片上传的接口,如下:


@Controller
public class TestController {


    //文件上传的物理保存路径,大家根据自己实际情况设置就行 C:/Users/czj/Desktop/dipImage/ 
    //注意:如果不是保存在项目默认的静态资源目录,需要设置项目静态资源目录哦 比如我这里就要设置,否则会显示不出来图片的,如何设置见下文
    @Value("${upload.filePath}")
    public String filePath;
    //文件显示的项目路径  http://localhost:${server.port}/ 如果有域名就改成http://域名/
    @Value("${project.path}")
    public String projectPath;


    @GetMapping("toTest")
    public String toTest() {
        return "test";
    }


    //editorMd上传图片 需要说明的是,返回值不能乱写,只能是Map,Map里面也不能乱写,包括数据类型
    //甚至editormd-image-file也不能乱写,除非修改editor.md的源码,是可以改的,我没去找哪儿改,嫌麻烦,有兴趣的小伙伴改完告诉我最好了 哼哼...
    @RequestMapping(value = "/uploadImg")
    public @ResponseBody
    Map<String, Object> upload(@RequestParam(value = "editormd-image-file", required = false) MultipartFile file) {
        return this.uploadImg(file);
    }


//具体的返回值Map请看这里
    public Map<String, Object> uploadImg(MultipartFile file) {
        String filename = file.getOriginalFilename();
        if (null == filename) {
            throw new RuntimeException("图片不存在");
        }
        // 定义上传文件保存路径 年份 + 月份 + 日期 + 文件名 我这里是将图片重命名了,并且每天的图片分开保存在不同的目录,防止同一目录图片过多导致卡顿,但是没有做图片去重,md5 base64啥的小伙伴们自己去搞哈
        int year = DateUtils.getYear(Calendar.getInstance());
        int month = DateUtils.getMonth(Calendar.getInstance());
        int date = DateUtils.getDate(Calendar.getInstance());
        String newPath = year + "/" + month + "/" + date + "/";
        String path = filePath + newPath;


        // 新建文件目录
        File uploadFile = new File(path, filename);
        // 判断路径是否存在,如果不存在就创建一个
        if (!uploadFile.getParentFile().exists()) {
            uploadFile.getParentFile().mkdirs();
        }


        Map<String, Object> resultMap = new HashMap<String, Object>();
        //文件上传
        try {
            file.transferTo(uploadFile);
            resultMap.put("success", 1);//这里还不能返回"1",即字符串1,好坑啊,不知道为什么...
            resultMap.put("message", "上传成功!");
        } catch (IOException e) {
            e.printStackTrace();
            resultMap.put("success", 0);
            resultMap.put("message", "文件上传失败!");
        }
        int success = Integer.parseInt(resultMap.get("success").toString());
        if (success == 1) {
            //文件重命名 时间戳 新的名字大家随意取,我这儿图简单
            long l;
            synchronized (TestController.class) {
                l = System.currentTimeMillis();
            }
            String newName = l + filename.substring(filename.lastIndexOf("."));
            boolean b = uploadFile.renameTo(new File(path + newName));
            if (b) {
                resultMap.put("url", projectPath + newPath + newName);
            } else {
                resultMap.put("url", projectPath + newPath + filename);
            }
        }
        return resultMap;
    }


}

 

这里设置一下项目静态资源目录,便于访问图片:
 
@Configuration
public class WebMvcConfig implements WebMvcConfigurer {


    /**
     * 设置静态资源访问路径
     * <p>
     * addResourceHandler 设置的是相对路径
     * addResourceLocations 设置的是绝对路径 本地新增路径需添加file:前缀,直接添加会覆盖springboot默认配置
     *
     * @param registry
     */
    @Override
    public void addResourceHandlers(ResourceHandlerRegistry registry) {
        //资源路径映射配置
        registry.addResourceHandler("/**")
                .addResourceLocations("classpath:templates/", "classpath:static/", "file:C:/Users/czj/Desktop/dipImage/");
    }


}

 

 
© 版权声明
THE END
喜欢就支持一下吧
点赞0
分享
评论 抢沙发