layui富文本编辑器上传图片

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

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

layui富文本编辑器上传图片相关推荐

layui富文本编辑器上传图片java_解决layui富文本编辑器图片上传无法回显的问题...
layui富文本编辑器用起来挺方便的,但是不足的是不提供图片上传的接口,需要自己写上传接口,而且返回的数据类型要符合layui富文本编辑器图片上传插件的要求,否则图片可以上传成功,但是无法回显,这个问 ...
layui富文本编辑器上传图片java,layui富文本编辑器+文件上传
(1)layui官网下载最新的样式压缩包,项目static目录下; (2)编辑器页面: 导入css样式: 导入js: 封面图: 选择文件内容: ${pd.NEIRONG} js: (3)shangc ...
富文本编辑器上传图片的功能
今天,我们来讲一下富文本编辑器上传图片功能的操作.首先,在这里需要引入一个js插件 (config.js),在插件里面写下配置图片上传的路径. 接下来,既然要实现上传图片的功能,那我们就需要一个东西是 ...
vue quill富文本编辑器上传图片遇到的坑
在使用quill富文本编辑器上传图片的时候,很多地方都是成功的,但是唯有一处,上传图片总是失败,由此后端的朋友就说可以html标签转换成JSON字符串上传上去,展示的时候在转换回来,即可解决问题. 由 ...
layui富文本编辑器图片上传无法回显问题解决
layui富文本编辑器用起来挺方便的,但是不足的是不提供图片上传的接口,需要自己写上传接口,而且返回的数据类型要符合layui富文本编辑器图片上传插件的要求,否则图片可以上传成功,但是无法回显,这个问 ...
LayUI - 富文本编辑器
一个做后端的猿,难免用到LayUI,首先在这里,不推荐使用,坑多一.富文本编辑器缺点:功能太少,只能满足简单需求,只有下面这几个功能废话少说,直接丢代码 html部分 <link rel= ...
vue问题四：富文本编辑器上传图片
vue使用富文本编辑器上传图片: 我是用的是wangEditor 富文本编辑器 demo:http://www.wangeditor.com/ 1).安装依赖:npm install wangedit ...
关于ckeditor富文本编辑器上传图片返回“不正确的服务器响应”的解决方案
最新由于项目需要,使用了ckeditor富文本编辑器,需要上传图片.在使用过程中突然发现,原来的ckeditor返回图片地址的方式返回"不正确的服务器响应".当时感觉好奇怪啊.明明 ...
ssh 使用 wangeditor3 富文本编辑器上传图片方法
这段时间在搞一个小网站的项目,其中有个功能是可以网页上编辑文字和图片,能一起上传到数据库然后在页面上展现,当然还可以上传附件,不过我现在还没弄好,先把上传图片的功能记录一下. 说到这个wangedit ...

layui富文本编辑器上传图片

layui富文本编辑器上传图片相关推荐

最新文章

热门文章