HTML代码:
这里的原理是你输入的内容会经过处理插入到文本区域textarea中
js代码:
/**
* 文本编辑器
*/
layui.use(['form', 'layedit'], function(){
var layedit = layui.layedit;
//上传图片,必须放在 创建一个编辑器前面
layedit.set({
uploadImage: {
url: 'upload' //接口url
,type: 'post' //默认post
}
});
//建立编辑器
layedit.build('demo',{
height: 500 //设置编辑器高度
});
});
后台接口代码:
/** 上传图片方法
* @param request
* @param description
* @param file
* @return
* @throws Exception
*/
@RequestMapping(value="upload")
@ResponseBody
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("/resource/uploads/");//target的目录
//本地使用
String rootPath ="E:\\bolg";
//原始名称
String originalFilename = file.getOriginalFilename();
//新的文件名称
String newFileName = res+originalFilename.substring(originalFilename.lastIndexOf("."));
//新文件
File newFile = new File(rootPath+ File.separator+newFileName);
//判断目标文件所在的目录是否存在
if(!newFile.getParentFile().exists()) {
//如果目标文件所在的目录不存在,则创建父目录
newFile.getParentFile().mkdirs();
}
System.out.println(newFile);
//将内存中的数据写入磁盘
file.transferTo(newFile);
//完整的url
String fileUrl = newFileName;
Mapmap = new HashMap();
Mapmap2 = new HashMap();
map.put("code",0);//0表示成功,1失败
map.put("msg","上传成功");//提示消息
map.put("data",map2);
map2.put("src",fileUrl);//图片url
map2.put("title",newFileName);//图片名称,这个会显示在输入框里
String result = new JSONObject(map).toString();
return result;
}
注意:如果想在编辑器中显示你上传的图片,需要配置tomcat的虚拟路径
配置虚拟路径的方法参考这篇文章:/qq_36750461/article/details/85050946