layui是贤心大神的开源前端框架，也是对后端菜鸟非常友好的一个框架，平常开发的时候就比较喜欢使用这个，最近刚好写网站就到了layui的富文本编辑器，遇到一些有意思的事情，就和大家聊聊。
首先准备工作先到官网下载layui资源包
之后新建一个项目我平常使用springboot项目，如果不熟悉Springboot的请参考大佬教程，把下载好的资源包layui文件夹放到static下
配置一下端口，个人比较喜欢yml文件
server:port: 8784
之后我们可以在static下面新建一个html进行编辑，依照文档进行编写
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Insert title here</title><link rel="stylesheet" href="layui/css/layui.css" /></head><body><textarea id="demo" ></textarea><script type="text/javascript" src="layui/layui.all.js" charset="utf-8"></script><script>layui.use('layedit', function(){var layer = layui.layer, $= layui.jquery,layedit=layui.layedit;var testEditor;layedit.set({uploadImage: {url: 'uploadconimage' //接口url,type: 'POST' //默认post}});layedit.build('demo', {height: 900,tool: [ 'strong' //加粗,'italic' //斜体,'underline' //下划线,'del' //删除线,'|' //分割线,'left' //左对齐,'center' //居中对齐,'right' //右对齐,'link' //超链接,'unlink' //清除链接,'face' //表情,'image' //插入图片,'help' //帮助]}); });</script></body></html>
这样我们就可以运行项目了，效果是这样的
当我们点击图片上传图标的时候会报接口异常，这个时候我们就需要编写图片上传代码
我们先编写一个图片上传接口
@RequestMapping(value="/uploadconimage",method=RequestMethod.POST)@ResponseBodypublic Map<String,Object> uploadconimage(HttpServletRequest request,@RequestParam MultipartFile file) {Map<String,Object> mv=new HashMap<String, Object>();Map<String,String> mvv=new HashMap<String, String>();try {String rootPath = request.getSession().getServletContext().getRealPath("/image/");Calendar date = Calendar.getInstance(); //Calendar.getInstance()是获取一个Calendar对象并可以进行时间的计算，时区的指定String originalFile = file.getOriginalFilename(); //获得文件最初的路径String uuid = UUID.randomUUID().toString(); //UUID转化为String对象 String newfilename=date.get(Calendar.YEAR)+""+(date.get(Calendar.MONTH)+1)+""+date.get(Calendar.DATE)+uuid.replace("-", "")+originalFile;//得到完整路径名File newFile = new File(rootPath+newfilename);/*文件不存在就创建*/if(!newFile.getParentFile().exists()){newFile.getParentFile().mkdirs();}String filename=originalFile.substring(0, originalFile.indexOf("."));System.out.println(originalFile);System.out.println(filename);file.transferTo(newFile);System.out.println("newFile : "+newFile);String urlpat= "/image/"+ newfilename;mvv.put("src", urlpat);mvv.put("title",newfilename);mv.put("code", 0);mv.put("msg", "上传成功");mv.put("data", mvv);return mv;} catch (Exception e) {e.printStackTrace();mv.put("success", 1);return mv;}}
然后在html中国配置上传接口
var testEditor;layedit.set({uploadImage: {url: 'uploadconimage' //接口url,type: 'POST' //默认post}});
这样就可以上传图片了
这样我们就完成了编辑器的部署工作，在这里我们需要注意一些问题不然很容易进坑，首先配置文件上传接口和类型的JS代码一定在 layedit.build之前，否则是配置不上的，还有就是接口返回的json一定要严格遵守文档的的格式规范和状态码。否则无法解析，同样的返回的内容也要符合规范。
{"msg": "上传成功","code": 0,"data": {"src": "/image/1123e4aeef42a3d847ee9663c4cea6f3c611036622be4ea41b7bdfcbac1096881e83.jpg","title": "1123e4aeef42a3d847ee9663c4cea6f3c611036622be4ea41b7bdfcbac1096881e83.jpg"}}
作为一个有求知欲的程序员，我尝试过修改返回内容发现会出现一些错误，code改为1，编辑器提示上传成功，但是不会显示图片，如果 src 为空则会出现这种情况，title和msg为空则不影响显示。
