1、去官網下載umeditor放到nginx根目錄下
將umeditor的目錄命名爲umeditor
2、修改umeditor的配置文件umeditor.config.js
# 修改前
// ,imageUrl:URL+"jsp/imageUp.jsp" //圖片上傳提交地址
// ,imagePath:URL + "jsp/" //圖片修正地址,引用了fixedImagePath,如有特殊需求,可自行配置
# 修改後
,imageUrl:"/sys/ueditor/upfile" //圖片上傳提交地址
,imagePath:"" //圖片修正地址,引用了fixedImagePath,如有特殊需求,可自行配置
3、文件上傳Controller
@RestController
@Api(value = "富文本編輯器", tags = "富文本編輯器")
@RequestMapping("/sys/ueditor")
@Slf4j
public class UEditorController {
/**
* 文件上傳service
*/
@Autowired
private SysFileInfoService sysFileInfoService;
@RequestMapping(value="/upfile")
@ApiOperation(value = "UMEditor文件上傳")
public UEditorResult upfile(HttpServletRequest request, HttpServletResponse response) {
try {
UEditorResult result = new UEditorResult();
result.setState("SUCCESS");
response.setContentType("application/json");
MultipartHttpServletRequest multipart = (MultipartHttpServletRequest)request;
MultipartFile multipartFile = multipart.getFile("upfile");
// 保存文件 並返回文件信息
SysFileInfo fileInfo = sysFileInfoService.upload(multipartFile);
result.setSize(multipartFile.getSize());
String oldFileName = multipartFile.getOriginalFilename();
result.setType(oldFileName.substring(oldFileName.lastIndexOf(".")));
result.setTitle(oldFileName);
result.setOriginal(oldFileName);
// 文件下載路徑
String url = "/sys/file/download/"+fileInfo.getId();
result.setUrl(url);
return result ;
} catch (Exception e) {
e.printStackTrace();
throw new RuntimeException(e.getMessage());
}
}
@Data
public class UEditorResult {
private String state;
private String url;
private String title;
private String original;
private String type;
private Long size;
}
4、nginx增加配置
使用nginx做反向代理解決跨域問題
server {
listen 8076;
server_name localhost;
charset utf-8;
proxy_connect_timeout 180;
proxy_send_timeout 180;
proxy_read_timeout 180;
proxy_set_header Host $host;
proxy_set_header X-Forwarder-For $remote_addr;
# 指向umeditor目錄
location / {
root umeditor;
index index.html index.htm;
}
# 代理到8080端口
location /sys {
proxy_pass http://127.0.0.1:8080;
}
}
5、訪問
UMeditor的集成比較簡單
啓動nginx,訪問http://127.0.0.1:8076,就可以使用UMeditor了