编辑器Ueditor和SpringBoot 的整合方法_网络技术_宿州市腾雀网络科技有限公司

编辑器Ueditor和SpringBoot 的整合方法

发布时间 - 2026-01-11 02:54:01 点击率：次

1.先导入ueditor所有的包:在springboot static下

2.导入需要的ueditor的js

3.配置ueditor.config.js的// 服务器统一请求接口路径://, serverUrl:(这个路径是个Java类,和config.js的内容相同)

4.js里面执行1.var ue = UE.getEditor('editor');函数

5.上传图片:

/* Ueditor里面的上传图片 */
UE.Editor.prototype._bkGetActionUrl=UE.Editor.prototype.getActionUrl;
//action是config.json配置文件的action
 UE.Editor.prototype.getActionUrl=function(action){
 if (action == 'uploadimage'){
  return [[@{/common/upload/image}]]; /* 这里填上你自己的上传图片的action */
 }else if(action == 'uploadvideo'){
  return [[@{/common/upload/image}]]; 
 }else{
  return this._bkGetActionUrl.call(this, action);
 }
 };

6.上传图片的方法:

@RequestMapping(value = "/upload/image", method = RequestMethod.POST, produces = MediaType.APPLICATION_JSON_VALUE)
 @ResponseBody
 public Map<String,Object> save(HttpServletRequest req){
 Map<String,Object> rs = new HashMap<String, Object>();
 MultipartHttpServletRequest mReq = null;
 MultipartFile file = null;
 String fileName = "";
 // 原始文件名 UEDITOR创建页面元素时的alt和title属性
 String originalFileName = "";
 try {
  mReq = (MultipartHttpServletRequest)req;
  // 从config.json中取得上传文件的ID
  file = mReq.getFile("upfile");
  if(!file.isEmpty()){ 
  // 取得文件的原始文件名称
  fileName = file.getOriginalFilename();
  originalFileName = fileName;
  String ext = (FilenameUtils.getExtension(file.getOriginalFilename())).toLowerCase();
 String storePath = "";
  if ("jpg".equals(ext) || "png".equals(ext) || "jpeg".equals(ext) || "bmp".equals(ext)) {
  storePath = "upload/image/";
 }else{
 storePath = "upload/video/";
 }
  //将图片和视频保存在本地服务器 
  String pathRoot = req.getSession().getServletContext().getRealPath(""); 
  String path = pathRoot + "/" + storePath; 
  file.transferTo(new File(path+fileName)); 
  String doMain = readProperties.getFileDomain();
String httpImgPath = doMain + storePath + fileName;
  rs.put("state", "SUCCESS");// UEDITOR的规则:不为SUCCESS则显示state的内容
  rs.put("url",httpImgPath);  //能访问到你现在图片的路径
  rs.put("title", originalFileName);
  rs.put("original", originalFileName); 
  } 
 } catch (Exception e) {
 e.printStackTrace();
  rs.put("state", "文件上传失败!"); //在此处写上错误提示信息，这样当错误的时候就会显示此信息
  rs.put("url","");
  rs.put("title", "");
  rs.put("original", "");
 }
 return rs;
 }

总结

以上所述是小编给大家介绍的编辑器Ueditor和SpringBoot 的整合方法，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对网站的支持！

# spring # boot和 # ueditor整合 # boot # 编辑器 # java基于spring boot本地上传图片示例解析 # 基于Spring Boot利用 ajax实现上传图片功能 # Spring boot的上传图片功能实例详解 # spring boot实现上传图片并在页面上显示及遇到的问题小结 # bootstrap fileinput组件整合Springmvc上传图片到本地磁盘 # SpringBoot整合UEditor的示例代码 # spring boot 若依系统整合Ueditor部署时上传图片错误问题 # 上传图片 # 小编 # 就会 # 是个 # 在此 # 你自己 # 提示信息 # 给大家 # 到你 # 不为 # 所述 # 写上 # 给我留言 # 配置文件 # 感谢大家 # 填上 # 上传文件 # 文件上传 # 疑问请

相关栏目：【网站优化151355 】【网络推广146373 】【网络技术251813 】【 AI营销90571 】

上一篇：阿里云空间建站教程：快速部署与模板搭建实战指南

下一篇：如何在Linux中使用grep命令进行日志分析？

相关栏目网站优化
网络推广
网络技术
AI营销

最新文章 Sublime怎么一键压缩JS代码 Su sublime如何在搜索中使用正则表达式 Sublime如何设置透明窗口效果 Su mysql如何设计商品表结构_mysql css属性背景图不显示怎么办_通过检查路如何使用Golang实现排序_Golan 农历闰月是怎么回事_为合回归年加一月调整塑造《刺客信条》艾吉奥传奇的编剧离开育碧 1英里等于多少公里 1mile和km的换 css grid布局中行和列是如何定义的 PS批量旋转和翻转图片，快速校正图片方向 C# Swagger UI自定义方法 C OPPO手机九宫格和全键盘怎么切换_OP Go语言如何实现用户登录注册_Golan 1节飞行速度多少公里每小时 1节是多少公纸嫁衣8千子树第五章庙门怎么开启庙门 Laravel 多行数据编辑表单中实现逐明日之后如何提升钓鱼等级明日之后提升钓支付宝怎样查年度账单_支付宝年度账单查看 C# 多线程UI更新Dispatcher

上一篇：阿里云空间建站教程：快速部署与模板搭建实战指南

下一篇：如何在Linux中使用grep命令进行日志分析？