layui富文本编辑器上传图片

最新推荐文章于 2024-08-06 14:35:02 发布

正在成长的小菜鸟

最新推荐文章于 2024-08-06 14:35:02 发布

阅读量5.9k

点赞数 5

分类专栏： layui基础 java基础文章标签： Springboot layui 富文本编辑器 layui富文本编辑器

本文链接：https://blog.csdn.net/weixin_43829645/article/details/103215651

版权

java基础同时被 2 个专栏收录

6 篇文章 0 订阅

订阅专栏

layui基础

4 篇文章 0 订阅

订阅专栏

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)
	@ResponseBody
	public 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/20191123e4aeef42a3d847ee9663c4cea6f3c611036622be4ea41b7bdfcbac1096881e83.jpg",
		"title": "20191123e4aeef42a3d847ee9663c4cea6f3c611036622be4ea41b7bdfcbac1096881e83.jpg"
	}
}

作为一个有求知欲的程序员，我尝试过修改返回内容发现会出现一些错误，code改为1，编辑器提示上传成功，但是不会显示图片，如果 src 为空则会出现这种情况，title和msg为空则不影响显示。