layui网页html编辑器,layui使用富文本编辑器

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的虚拟路径

配置虚拟路径的方法参考这篇文章：https://blog.csdn.net/qq_36750461/article/details/85050946