前端部署

下载UEditor项目包，并部署到项目中

pring boot项目放在静态资源目录下

在页面加载UEditor

<!DOCTYPE HTML>
<html lang="en" class="no-js"><head><meta charset="UTF-8"><title>ueditor demo</title><!-- spring boot默认静态资源跟目录在static下 --><script type="text/javascript" charset="utf-8" src="/ueditor1_4_3_3/ueditor.config.js"></script><script type="text/javascript" charset="utf-8" src="/ueditor1_4_3_3/ueditor.all.min.js"></script><script type="text/javascript" charset="utf-8" src="/ueditor1_4_3_3/lang/zh-cn/zh-cn.js"></script>
</head><body text-align:center><table style="margin:0 auto;"><tr><td><h1>ueditor demo</h1></td></tr><tr><td><script id="editor" type="text/plain" style="width:1024px;height:500px;"></script></td></tr></table><script type="text/javascript">var ue = UE.getEditor('editor');</script>
</body></html>

执行效果

到这里UEditor一些基础的编辑功能已经能够使用了，但是像图片上传这一类功能还需要进行后台配置。

后端部署

目录结构

配置后台统一请求路径

在ueditor.config.js找到serverUrl参数修改为自己的后台请求接收方法

// 服务器统一请求接口路径
, serverUrl: "/ueditor/interface"

编写请求接收方法

    /*** ueditor 服务器统一请求接口(GET)* @param action config 加载时获取配置文件* @return*/@RequestMapping(value = "/ueditor/interface", method = RequestMethod.GET)@ResponseBodypublic String ueGetInterface(String action) {System.out.println("Successful GET interface call");return null;}

测试请求路径是否设置成功。

ue在加载时会调用一次serverUrl，我们可以在接收方法内打断点或打印日志进行测试。

在这里要对统一请求路径做一下说明：

ueditor会将所有的后台请求发送至统一请求路径。

不同的功能会使用不同的方式提交，获取配置使用GET提交，上传图片或文件使用POST提交，所以接口要分开两个方法写。

既然所有的后台请求都发送到一个接口，那么怎么区分请求的是什么功能呢？答案就是action参数，action传入“config”时代表获取配置，action传入“uploadimage”时代表上传图片，还有其他的值在这里就不做一一列举了，可以自己去看api文档。

设置上传配置

在服务器统一请求接口中获取配置并转换成json形式返回

    /*** ueditor 服务器统一请求接口(GET)* @param action config 加载时获取配置文件* @return*/@RequestMapping(value = "/ueditor/interface", method = RequestMethod.GET)@ResponseBodypublic String ueGetInterface(String action) {System.out.println("Successful GET interface call");//创建文件上传配置文件类并转换为json方式返回if(action != null && action.equals("config")){try {ObjectMapper mapper = new ObjectMapper();String config = mapper.writeValueAsString(new UeditorUploadConfig());return config;} catch (Exception e) {e.printStackTrace();}}return null;}

package pub.lichao.ueditor.controller;/*** Ueditor 文件上传配置*/
public class UeditorUploadConfig {/*** 执行上传图片的action名称*/private String imageActionName="uploadimage";/*** 提交的图片表单名称*/private String imageFieldName="upfile";/*** 上传大小限制，单位B*/private Integer imageMaxSize=2048000;/*** 上传图片格式显示*/private String[] imageAllowFiles=new String[]{".png",".jpg",".jpeg",".gif"};/*** 是否压缩图片*/private Boolean imageCompressEnable=true;/*** 图片压缩最长边限制*/private Integer imageCompressBorder=1600;/*** 插入的图片浮动方式*/private String imageInsertAlign="none";/*** 图片访问路径前缀*/private String imageUrlPrefix="";... get set 方法 ...
}

编写图片上传逻辑

本项目将图片保存到了项目本地路径中，在实际应用中往往会将图片保存在专门的图片服务器中。例如阿里云的OSS

    /*** ueditor 服务器统一请求接口(POST)* @param action uploadimage 图片上传* @return*/@RequestMapping(value = "/ueditor/interface", method = RequestMethod.POST)@ResponseBodypublic String uePostInterface(String action,MultipartFile upfile, HttpServletRequest request) {System.out.println("Successful POST interface call");//转换json格式工具ObjectMapper mapper = new ObjectMapper();//返回值对象ImageState imageState = new ImageState();try {//执行图片上传并返回json格式结果if(action != null && action.equals("uploadimage")){System.out.println("uploadimage");//保存文件（将图片上传到项目中，生产应用中会使用OSS等文件服务器进行存放）String dirPath = request.getSession().getServletContext().getRealPath("/images");new File(dirPath).mkdirs(); //创建目录System.out.println("图片保存在{"+dirPath+"}目录中");//为防止重名使用时间戳重新命名String filename = "image" + Long.toString(System.currentTimeMillis()) + "." + FilenameUtils.getExtension(upfile.getOriginalFilename());   ;String filePath = dirPath + "/" + filename;upfile.transferTo(new File(filePath));//转存文件//组装返回值imageState.setState("SUCCESS");imageState.setOriginal(upfile.getOriginalFilename());imageState.setSize(Long.toString(upfile.getSize()));imageState.setTitle(filename);imageState.setType(upfile.getContentType());String url = request.getScheme() +"://" + request.getServerName()  + ":" +request.getServerPort() + request.getContextPath() + "/images/" + filename;imageState.setUrl(url);return mapper.writeValueAsString(imageState);}else{imageState.setState("无匹配的action类型");return mapper.writeValueAsString(imageState);}} catch (Exception e) {e.printStackTrace();}return null;}

package pub.lichao.ueditor.controller;/*** Ueditor 图片返回值*/
public class ImageState {/*** 上传状态 上传成功时必须返回"SUCCESS"，失败时可以返回错误提示*/private String state;/*** 上传的原文件名*/private String original;/*** 文件大小*/private String size;/*** 上传后的新文件名*/private String title;/*** 文件类型*/private String type;/*** 图片访问地址*/private String url;... get set 方法 ...
}

访问图片

图片上传成功后要给前台返回一个图片的访问地址，图片才能够正常在插件中展示。这里提供有一个访问项目中图片的类用于本例子使用。如果是使用文件服务器就不用此部分代码了，直接使用服务器提供的url返回给前台展示即可。

package pub.lichao.ueditor.controller;import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.core.io.ResourceLoader;
import org.springframework.http.ResponseEntity;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.ResponseBody;import javax.servlet.http.HttpServletRequest;
import java.nio.file.Paths;@Controller
public class ImageController {private final ResourceLoader resourceLoader;@Autowiredpublic ImageController(ResourceLoader resourceLoader) {this.resourceLoader = resourceLoader;}/*** 访问图片* @param imagename* @param request* @return*/@RequestMapping(value = "/images/{imagename:.+}", method = RequestMethod.GET)@ResponseBodypublic ResponseEntity<?> images(@PathVariable String imagename,HttpServletRequest request) {try {String dirPath = request.getSession().getServletContext().getRealPath("/images");return ResponseEntity.ok(resourceLoader.getResource("file:" + Paths.get(dirPath, imagename).toString()));} catch (Exception e) {return ResponseEntity.notFound().build();}}
}

其实图片上传是一个比较容易实现的功能，此文希望对大家有帮助。

转载于:https://my.oschina.net/u/3452433/blog/916535

UEditor应用 —— 图片上传相关推荐

Ueditor编辑器图片上传
Ueditor编辑器图片上传 UEditor的图片上传采用了Flash上传的方式,在功能上支持批量.本地预览和实时进度提示,在界面上支持自定义背景.上传按钮和预览框等视觉元素的样式属性,基本能够满足各 ...
themyleaf 图片上传_springboot thymeleaf 整合百度富文本编辑器UEditor进行图片上传
项目中需要使用到富文本编辑器,找来找去发现百度UEditor富文本编辑器在国内最为常用因此就尝试引入.编辑器官网是:http://ueditor.baidu.com/website/index.htm ...
ueditor 上传路径 Php_v9切换ueditor后图片上传路径问题改成绝对路径
使用V9切换成ueditor编辑器后,图片上传路径显示的是相对路径,同时会把content字段第一张图这个路径同步到缩略图的thumb字段.thumb字段如果是相对路径的话,前端就不能进行裁剪,APP ...
asp.net 百度编辑器 UEditor 上传图片图片上传配置编辑器配置网络连接错误，请检查配置后重试...
1.配置ueditor/editor_config.js文件,将 //图片上传配置区,imageUrl:URL+"net/imageUp.ashx" //图片上传提交地址,imag ...
UEditor之图片上传如何和真实项目结合
开心一笑周末,五六个朋友聚餐,席间,阿凌注意到阿艳沉默少语,不比以往的活波开朗,像有心事.饭后回去的路上,阿凌走到阿艳身边说:"你的电量好像不够了?" 阿艳:"啊,什么 ...
ueditor编辑器php上传配置,Ueditor编辑器图片上传自定义配置
U需朋者说上事是础一发一开程和开数的目前间editor图片上传自新直能分支调二浏页器朋代说,事刚定义配置不使用自带后遇新是直朋能到分览台配置 1开进架触我法端位画近发行思发们识和移的近.加载Uedi ...
【.net】Ueditor中图片上传和图片回显路径的设置
在csdn六百多天的游侠今日现身江湖. 问题发生的背景: 所有项目代码中,图片上传都是固定存到一个图片专属的盘符,这样就可以整个盘符对所有图片进行备份以防丢失. 但是!有一个站点所引用的百度编辑器(主 ...
uve 使用百度ueditor自定义图片上传,在线图片插入,在线图片管理
前言本帖所有内容均用于学习使用,如有涉及侵权,请看到后联系我进行删帖上图片环境 "axios": "^0.21.1", "element-ui& ...
ueditor使用-图片上传正常，图片显示异常404
做个小项目,用到了ueditor,其中需要在ueditor中上传图片. 问题症状: 点击上传图片的按钮后选择图片,上传到了目的文件夹,但是显示不了,f12查看也是404.后来发觉显示图片时路径不对. ...

UEditor应用 —— 图片上传