效果图：
1.html页面
使用文本域标签承载富文本编辑器<textarea></textarea><div class="layui-form-item"><label class="layui-form-label required" >内容</label><div class="layui-input-inline" style="width: 600px"> <textarea class="layui-textarea" id="content" placeholder="请输入内容" style="display: none" name="content" autocomplete="off"></textarea></div></div>
通过按钮进行内容绑定，将富文本编辑器中的内容绑定到表单form中并提交<div class="layui-form-item"> <button style="margin:0 auto;display:block;" class="layui-btn" type="button" data-type="text" id="fileNotifySubmit"><iclass="fa fa-check-circle"></i> 发布</button></div>
2.JS代码
<!--富文本编辑器--><script>layui.use(['layedit','form'], function(){var layedit = layui.layedit,$ = layui.jquery,form = layui.form;//设置图片上传 layedit.set({uploadImage: {url: '/uplaod/uploadFile' //图片上传方法的接口url ,type: 'post' //默认post}}); //构建富文本编辑器，构建方法一定要写在set方法下边var index = layedit.build('content');//校验表单的方法，并将富文本编辑器中的内容同步到文本域中form.verify({content : function(value) {return layedit.sync(index); //同步语句}});//保存表单内容提交的方法$('#fileNotifySubmit').on('click', function(){var active = {//获取纯文本内容： 111 //如果要获取样式，将text替换成 content: <p>111</p>//如果要获取选中的文字，将text替换成selected：111text: function(){//获取富文本编辑器值的语句并赋值到文本域中document.getElementById("content").innerText = layedit.getContent(index);}}; var type = $(this).data('type');active[type] ? active[type].call(this) : '';var form = new FormData(document.getElementById("formFile"));//保存表单内容的请求，此处为文件通知对象$.ajax({url:"/fileNotification/insert",type:"post",data:form,processData:false,contentType:false,success: function (result) {if (result.status ===true) {var index = parent.layer.getFrameIndex(window.name);parent.layer.close(index);parent.window.location.reload()}else {layer.msg(result.msg, { icon: 2, time: 1000 });}}});});});//重新加载的方法layui.use(['table', 'laydate','element'], function () {var table = layui.table, form = layui.form, $ = layui.jquery;});</script>
3.图片上传后台方法
返回的结果必须为下图格式：
package com.hl.controller;import java.io.File;import java.io.FileOutputStream;import java.io.IOException;import java.text.SimpleDateFormat;import java.util.Calendar;import java.util.Date;import java.util.HashMap;import java.util.Map;import javax.servlet.http.HttpServletRequest;import org.apache.ibatis.annotations.Param;import org.json.JSONObject;import org.springframework.beans.factory.annotation.Value;import org.springframework.stereotype.Controller;import org.springframework.util.FileCopyUtils;import org.springframework.web.bind.annotation.RequestMapping;import org.springframework.web.bind.annotation.ResponseBody;import org.springframework.web.multipart.MultipartFile;@Controller@RequestMapping("/upload")public class LayEditController {//配置文件中配置本地映射路径/服务器路径 @Value("${file.rootPath}")private String rootPath;//上传文件 @ResponseBody@RequestMapping(value = "/uploadFile")public String uploadFile(HttpServletRequest request,@Param("file") MultipartFile file) throws IOException{SimpleDateFormat sdf = new SimpleDateFormat("yyyyMMddHHmmssSS");String res = sdf.format(new Date());//服务器上使用//如果在配置文件中已经配置，可以不用写// String rootPath =request.getServletContext().getRealPath("/upload/");//target的目录//本地使用// String rootPath ="/C:/upload/";//原始名称String originalFilename = file.getOriginalFilename();//新的文件名称String newFileName = res+originalFilename.substring(originalFilename.lastIndexOf("."));//创建年月文件夹Calendar date = Calendar.getInstance();File dateDirs = new File(date.get(Calendar.YEAR)+ File.separator + (date.get(Calendar.MONTH)+1));//新文件File newFile = new File(rootPath+File.separator+dateDirs+File.separator+newFileName);//判断目标文件所在的目录是否存在if(!newFile.getParentFile().exists()) {//如果目标文件所在的目录不存在，则创建父目录newFile.getParentFile().mkdirs();}System.out.println(newFile); //可打印出文件路径//将内存中的数据写入磁盘file.transferTo(newFile);//完整的urlString fileUrl = "/upload/"+date.get(Calendar.YEAR)+ "/"+(date.get(Calendar.MONTH)+1)+ "/"+ newFileName;Map<String,Object> map = new HashMap<String,Object>();Map<String,Object> map2 = new HashMap<String,Object>();//0表示成功，1失败map.put("code",0);//提示消息map.put("msg","上传成功");map.put("data",map2);//图片urlmap2.put("src",fileUrl);//图片名称，这个会显示在输入框里map2.put("title",newFileName);String result = new JSONObject(map).toString();return result;}}
4.表单提交之后内容保存方法：
@ResponseBody@RequestMapping("/insert")@RequiresPermissions("文件通知新增")public ResponseMsg insert(@RequestParam("file") MultipartFile [] file, @Valid FileNotification fileNotification, BindingResult bindingResult){for (ObjectError error : bindingResult.getAllErrors()) {return new ResponseMsg(false,error.getDefaultMessage());}if (file.length > 0){Map<String,String> map = new LinkedHashMap<>();Arrays.stream(file).forEach(a->{String alyFileName = ToolUtil.generateShortUuid();ALYUtil.uploadFile(a, alyFileName);map.put(a.getOriginalFilename(),alyFileName);});fileNotification.setFileName(JSONObject.toJSONString(map));}fileNotification.setSendRole(fileNotification.getSendRole() + ",2"); fileNotificationService.save(fileNotification);return new ResponseMsg(true,"发送成功");}
5.配置文件中配置本地路径或服务器路径：注意缩进【rootPath在file下一级】
file:#本地路径rootPath: C://upload/#服务器路径 ：获取方式request.getServletContext().getRealPath("/upload/");# rootPath: 服务器路径
这里的路径还需要在配置类中去指定：
/*** 资源映射路径*/@Configurationpublic class ImgConfigurer implements WebMvcConfigurer {@Overridepublic void addResourceHandlers(ResourceHandlerRegistry registry) {registry.addResourceHandler("/upload/**").addResourceLocations("file:/" + "C://upload/");}}
