SpringBoot整合Editor.Md实现Markdown富文本编辑器
- 先下载editor.md文件夹点我下载https://share.weiyun.com/gUpFvM7m 密码：xr5ds3
- 解压文件放到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>
- 然后在editor文件中的editormd.js修改一下配置
imageUpload : true,
imageFormats : ["jpg", "jpeg", "gif", "png", "bmp", "webp"],
imageUploadURL : "D:/Users/czj/Desktop/dipImage/",
crossDomainUpload : false,
uploadCallbackURL : "",
- 然后是后台接口，其实就一个图片上传的接口，如下
package com.blogs.controller;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.multipart.MultipartFile;
import org.thymeleaf.util.DateUtils;
import java.io.File;
import java.io.IOException;
import java.util.Calendar;
import java.util.HashMap;
import java.util.Map;
@Controller
public class TestController {
//文件上传的物理保存路径，大家根据自己实际情况设置就行 C:/Users/czj/Desktop/dipImage/
//注意：如果不是保存在项目默认的静态资源目录，需要设置项目静态资源目录哦 比如我这里就要设置，否则会显示不出来图片的，如何设置见下文
// @Value("${upload.filePath}")
public static String filePath="D:/Users/czj/Desktop/dipImage/";
//文件显示的项目路径 http://localhost:${server.port}/ 如果有域名就改成http://域名/
// @Value("${project.path}")
public String projectPath="http://localhost:8080/";
@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.year(Calendar.getInstance());
int month = DateUtils.month(Calendar.getInstance());
int date = DateUtils.day(Calendar.getInstance());
String newPath = year + "/" + month + "/" + date + "/";
// String path = filePath + newPath;
String path = filePath;
// 新建文件目录
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);
resultMap.put("url", projectPath + newName);
} else {
// resultMap.put("url", projectPath + newPath + filename);
resultMap.put("url", projectPath +filename);
}
}
return resultMap;
}
}
然后设置一下项目静态资源目录，便于访问图片：
package com.blogs.congif;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.ResourceHandlerRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;
@Configuration
public class WebMvcConfig implements WebMvcConfigurer {
@Override
public void addResourceHandlers(ResourceHandlerRegistry registry) {
//资源路径映射配置
registry.addResourceHandler("/**")
.addResourceLocations("classpath:templates/", "classpath:static/","file:D:/Users/czj/Desktop/dipImage/");
// , "file:C:/Users/czj/Desktop/dipImage/"
}
}
1780
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
