第一步：

一、去ue官网下载他的源码(已经有的了就略过)

二、Eclipse新建项目ueditorDemo

项目目录如下：

application.properties配置如下：

第二步：

一、解压下载的源码——然后打开项目把源码拖进项目的resources/static中去

二、在WEB-INF下新建jsp文件夹添加一个index.jsp

三、将static中ueditor文件下的index.html中的内容复制到index.jsp中，修改一下js的路径，基本如下

然后启动项目去访问：http://localhost:8080/ueditorDemo/

这时候访问页面成功但是后台还没配置：F12打开Console发现报错

这时候查看请求会发现 http://localhost:8080/ueditorDemo/ueditor/jsp/controller.jsp?action=config&&noCache=1595814465808这个请求服务器的请求

说明我打开这个页面它就去请求我的后台了

第三步(配置后台)：

一、打开static中ueditor文件下的ueditor.config.js

将 serverUrl 改为 "ueditor/config1" 如下图：

二、下面就要把源码里面的jsp下的jar包，add到项目中去

这里有两种方式来配置分别建了Demo1Controller 跟Demo2Controller 两个来区别（推荐第二种）

只演示第一种：

Demo1Controller.class

package com.demo.Controller;import java.io.File;import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.multipart.MultipartFile;import com.demo.entity.Results;@Controller
public class Demo1Controller {/*** 这里有两种方式，推荐第二种 第一种只是简略版 （只为演示）* 一、上传配置：即不走config.json，自定义模拟config.json里的内容，解决后端配置项不正确，无法上传的问题 二、走config.json* 即读取文件中的配置内容（在Demo1Controller）中* * @return*/@RequestMapping(value = "/ueditor/config1", method = RequestMethod.GET)@ResponseBodypublic String uploadConfig(String action, String noCache) {// 注意以下：imageActionName// 根据这个ActionName的名字来上传接口：比如我现在设置的上传文件接口为下面那个：multipleCarouselFiles// imageUrlPrefix：是【点击确认之后，加载的资源路径】所属服务器中获取资源System.out.println("进入config====================");System.out.println("action=" + action + "   callback=" + noCache);String s = "{\n" + "            \"basePath\": \"C:/\",\n"+ "            \"imageActionName\": \"/multipleCarouselFiles\",\n"+ "                \"imageFieldName\": \"upfile\", \n" + "                \"imageMaxSize\": 2048000, \n"+ "                \"imageAllowFiles\": [\".png\", \".jpg\", \".jpeg\", \".gif\", \".bmp\"], \n"+ "                \"imageCompressEnable\": true, \n"+ "                \"imageCompressBorder\": 1600, \n"+ "                \"imageInsertAlign\": \"none\", \n"+ "                \"imageUrlPrefix\": \"http://localhost:8080/ueditorDemo/static/upload/images\",\n"+ "                \"imagePathFormat\": \"/ueditor/jsp/upload/image/{yyyy}{mm}{dd}/{time}{rand:6}\",  /* 上传视频配置 */\n"+ "    \"videoActionName\": \"/multipleCarouselFiles\", /* 执行上传视频的action名称 */\n"+ "    \"videoFieldName\": \"upfile\", /* 提交的视频表单名称 */\n"+ "    \"videoPathFormat\": \"/ueditor/jsp/upload/video/{yyyy}{mm}{dd}/{time}{rand:6}\", /* 上传保存路径,可以自定义保存路径和文件名格式 */\n"+ "    \"videoUrlPrefix\": \"http://localhost:8080/ueditorDemo/static/upload/images\", /* 视频访问路径前缀 */\n"+ "    \"videoMaxSize\": 204800000, /* 上传大小限制，单位B，默认100MB */\n" + "    \"videoAllowFiles\": [\n"+ "        \".flv\", \".swf\", \".mkv\", \".avi\", \".rm\", \".rmvb\", \".mpeg\", \".mpg\",\n"+ "        \".ogg\", \".ogv\", \".mov\", \".wmv\", \".mp4\", \".webm\", \".mp3\", \".wav\", \".mid\"]/* 上传视频格式显示 */ }";return s;}/*** Ueditor上传文件* 这里以上传图片为例，图片上传后，imgPath将存储图片的保存路径，返回到编辑器中做展示* @param file* @return*/@RequestMapping(value = "/multipleCarouselFiles",method = RequestMethod.POST)@ResponseBodypublic String uploadimage(@RequestParam("upfile") MultipartFile file, HttpServletRequest request, HttpServletResponse response) {//服务协议String Scheme =request.getScheme();//服务器名称String ServerName= request.getServerName();//服务器端口int Port= request.getServerPort();String url=Scheme+"://"+ServerName+":"+Port;Results results=new Results();//判断非空if (file.isEmpty()) {return "上传的文件不能为空";}try {//1、设置上传路径String p  = request.getSession().getServletContext().getRealPath("/src/main/webapp/upload/images");File path = new File(p);if(!path.exists()){path = new File("");}//2、如果上传目录为/static/images/upload/，则可以如下获取：File upload = new File(path.getAbsolutePath(),"/src/main/webapp/upload/images");if(!upload.exists()){upload.mkdirs();}System.out.println("上传目录为---upload url:"+upload.getAbsolutePath());//测试MultipartFile接口的各个方法System.out.println("[文件类型ContentType] -:"+file.getContentType());System.out.println("[文件组件名称Name] -:"+file.getName());System.out.println("[文件原名称OriginalFileName] -:"+file.getOriginalFilename());System.out.println("[文件大小] -:"+file.getSize());System.out.println(this.getClass().getName()+"图片路径："+upload);// 如果不存在该路径就创建String uploadPath=upload+"\\";File dir = new File(uploadPath + file.getOriginalFilename());// 文件写入file.transferTo(dir);//在开发测试模式时，得到的地址为：{项目根目录}/target/static/images/upload///在打包成jar正式发布时，得到的地址为：{发布jar包目录}/static/images/upload/results.setMessage("上传单个文件成功");} catch (Exception e) {e.printStackTrace();results.setMessage("上传单个文件失败");}String result = "";if(!file.isEmpty()) {String originalFileName = file.getOriginalFilename();// 这里写你的文件上传逻辑// String imgPath = fileUtil.uploadImg(file);String imgPath = "/"+originalFileName;result = "{\n" +"    \"state\": \"SUCCESS\",\n" +"    \"url\": \"" + imgPath + "\",\n" +"    \"title\": \"" + originalFileName + "\",\n" +"    \"original\": \"" + originalFileName + "\"\n" +"}";}return result;}
}

Demo2Controller.class

package com.demo.Controller;import java.io.BufferedReader;
import java.io.File;
import java.io.InputStream;
import java.io.InputStreamReader;
import java.io.PrintWriter;
import java.io.UnsupportedEncodingException;
import java.text.SimpleDateFormat;
import java.util.Date;
import java.util.HashMap;
import java.util.Map;import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.multipart.MultipartFile;import com.alibaba.fastjson.JSON;@Controller
public class Demo2Controller {/*** 初始化UEditor上传文件、图片等配置* * @param request* @param response*/@RequestMapping(value = "/ueditor/config2")public void initController(MultipartFile upfile, HttpServletRequest request, HttpServletResponse response) {try {request.setCharacterEncoding("UTF-8");response.setHeader("Content-Type", "text/html");System.out.println("url : " + request.getRequestURL().toString());String value = request.getParameter("action");System.out.println("action:" + value);// 文件上传的路径（自定义）我这里是tomcat的路径String rootPath = "E:/apache-tomcat-8.0.52/webapps/ROOT/img/";String result = null;if ("config".equals(value)) { // 读取配置文件，将配置文件数据以json格式返回String configPath = "/static/ueditor/jsp/config.json";// 配置文件路径， 相对于classpath/*** 返回JOSN数据* {"videoMaxSize":102400000,"videoActionName":"uploadvideo","fileActionName":"uploadfile","fileManagerListPath":"/ueditor/jsp/upload/file/","imageCompressBorder":1600,"imageManagerAllowFiles":[".png",".jpg",".jpeg",".gif",".bmp"],"imageManagerListPath":"/ueditor/jsp/upload/image/","fileMaxSize":51200000,"fileManagerAllowFiles":[".png",".jpg",".jpeg",".gif",".bmp",".flv",".swf",".mkv",".avi",".rm",".rmvb",".mpeg",".mpg",".ogg",".ogv",".mov",".wmv",".mp4",".webm",".mp3",".wav",".mid",".rar",".zip",".tar",".gz",".7z",".bz2",".cab",".iso",".doc",".docx",".xls",".xlsx",".ppt",".pptx",".pdf",".txt",".md",".xml"],"fileManagerActionName":"listfile","snapscreenInsertAlign":"none","scrawlActionName":"uploadscrawl","videoFieldName":"upfile","imageCompressEnable":true,"videoUrlPrefix":"","fileManagerUrlPrefix":"","catcherAllowFiles":[".png",".jpg",".jpeg",".gif",".bmp"],"imageManagerActionName":"listimage","snapscreenPathFormat":"/upload/image/{yyyy}{mm}{dd}/{time}{rand:6}","scrawlPathFormat":"/upload/image/{yyyy}{mm}{dd}/{time}{rand:6}","scrawlMaxSize":2048000,"imageInsertAlign":"none","catcherPathFormat":"/upload/image/{yyyy}{mm}{dd}/{time}{rand:6}","catcherMaxSize":2048000,"snapscreenUrlPrefix":"","imagePathFormat":"/upload/image/{yyyy}{mm}{dd}/{time}{rand:6}","imageManagerUrlPrefix":"","scrawlUrlPrefix":"","scrawlFieldName":"upfile","imageMaxSize":2048000,"imageAllowFiles":[".png",".jpg",".jpeg",".gif",".bmp"],"snapscreenActionName":"uploadimage","catcherActionName":"catchimage","fileFieldName":"upfile","fileUrlPrefix":"","imageManagerInsertAlign":"none","catcherLocalDomain":["127.0.0.1","localhost","img.baidu.com"],"filePathFormat":"/ueditor/jsp/upload/file/{yyyy}{mm}{dd}/{time}{rand:6}","videoPathFormat":"/ueditor/jsp/upload/video/{yyyy}{mm}{dd}/{time}{rand:6}","fileManagerListSize":20,"imageActionName":"uploadimage","imageFieldName":"upfile","imageUrlPrefix":"","scrawlInsertAlign":"none","fileAllowFiles":[".png",".jpg",".jpeg",".gif",".bmp",".flv",".swf",".mkv",".avi",".rm",".rmvb",".mpeg",".mpg",".ogg",".ogv",".mov",".wmv",".mp4",".webm",".mp3",".wav",".mid",".rar",".zip",".tar",".gz",".7z",".bz2",".cab",".iso",".doc",".docx",".xls",".xlsx",".ppt",".pptx",".pdf",".txt",".md",".xml"],"catcherUrlPrefix":"","imageManagerListSize":20,"catcherFieldName":"source","videoAllowFiles":[".flv",".swf",".mkv",".avi",".rm",".rmvb",".mpeg",".mpg",".ogg",".ogv",".mov",".wmv",".mp4",".webm",".mp3",".wav",".mid"]}*/InputStream inStream = Demo2Controller.class.getResourceAsStream(configPath);StringBuilder builder = new StringBuilder();try {InputStreamReader reader = new InputStreamReader(inStream, "UTF-8");BufferedReader bfReader = new BufferedReader(reader);String tmpContent = null;while ((tmpContent = bfReader.readLine()) != null) {builder.append(tmpContent);}bfReader.close();} catch (UnsupportedEncodingException e) {e.printStackTrace();}// 过滤输入字符串, 剔除多行注释以及替换掉反斜杠result = builder.toString().replaceAll("/\\*[\\s\\S]*?\\*/", "").replaceAll(" ", "");System.out.println("result:" + result);} else if ("uploadimage".equals(value)) {// 上传文件// 上传成功后返回的json数据/** {"state": "SUCCESS","original": "Hydrangeas.jpg","size": "595284","title":* "1551927256870045443.jpg","type": ".jpg","url":* "/upload/image/20190307/1551927256870045443.jpg"}*/String originalFilename = upfile.getOriginalFilename();String type = originalFilename.substring(originalFilename.indexOf("."), originalFilename.length());long size = upfile.getSize();System.out.println(originalFilename);System.out.println(size);SimpleDateFormat sdf = new SimpleDateFormat("yyyyMMdd");String middlePath = sdf.format(new Date()) + "/";String fileFullName = rootPath + middlePath + originalFilename;// 图片访问地址（tomcat服务器）String url = "http://localhost:8080//" + middlePath + originalFilename;try {File file = new File(fileFullName);if (!file.getParentFile().exists()) {file.getParentFile().mkdirs();}upfile.transferTo(file);Map<String, Object> map = new HashMap<String, Object>();map.put("state", "SUCCESS");map.put("original", originalFilename);map.put("size", size);map.put("title", originalFilename);map.put("type", type);map.put("url", url);result = JSON.toJSONString(map);System.out.println("result : " + result);} catch (Exception e) {e.printStackTrace();}}PrintWriter writer = response.getWriter();writer.write(result);writer.flush();writer.close();} catch (Exception e) {e.printStackTrace();}}}

三、修改index.jsp中的代码在 var ue = UE.getEditor('editor'); 下添加红框中的代码

 UE.Editor.prototype._bkGetActionUrl = UE.Editor.prototype.getActionUrl;UE.Editor.prototype.getActionUrl = function(action){if(action == '/multipleCarouselFiles') {return '/ueditorDemo/multipleCarouselFiles';}else{return this._bkGetActionUrl.call(this,action);}}

然后就是启动项目上传图片啦

上传成功啦查看日志会发现自己上传的路径

如果是按照我这个思路来一般都没有什么问题出现问题的地方基本上是路径的问题

在这里我说明一下

重要的4个路径配置：

1、ueditor.config.js 中的 serverUrl ：这个是ueditor发送给服务器获取配置文件的请求

2、自定义或者config.json中的 imageActionName ：这个是上传图片请求服务器的接口

3、自定义或者config.json中的 imageUrlPrefix ：这个是回显图片的是要请求的图片路径

4、index.jsp 中的如下：这个是替换上传图片是的action 改为服务器下的项目名/接口

不然会出现访问错误的情况

 UE.Editor.prototype._bkGetActionUrl = UE.Editor.prototype.getActionUrl;UE.Editor.prototype.getActionUrl = function(action){if(action == '/multipleCarouselFiles')    {return '/ueditorDemo/multipleCarouselFiles';}else{return this._bkGetActionUrl.call(this,action);}}

另外我还配置了上传视频的内容：ueditor上传视频

springboot整合ueditor上传图片配置（JSP）从新建项目开始相关推荐

很详细的SpringBoot整合UEditor教程
很详细的SpringBoot整合UEditor教程 2017年04月10日 20:27:21 小宝2333 阅读数:21529 版权声明:本文为博主原创文章,未经博主允许不得转载. https://b ...
SpringBoot整合Log4j2以及配置详解
文章目录标题SpringBoot整合Log4j2以及配置详解 1.加入依赖 2.在src.java.main.resources目录下创建log4j2.xml文件 log4j2.xml文件内容如下: ...
ueditor编辑器java使用_java/springboot整合UEditor编辑器
官网下载jsp版ueditor放进项目,其实放在哪个目录看项目习惯(有些按照网上的来就是路径问题导致),主要是获取配置的时候能找到相应的路径. 页面上引入相应js,加上也可script方式 uedit ...
STS安装配置及写的一个springboot整合mybatis的小demo
新入职的猿,师傅给了一个小任务,用STS写一个springboot整合mybatis的小demo.由于之前没用过STS和eclipse,所以听到这个任务还是比较懵逼的,经过一天的摸索,慢慢的摸出了门道 ...
spring boot连接redis配置127.0.0.1_Java技术分享——Springboot整合redis
springboot提供了spring-data-redis的框架来整合redis的操作.下面主要介绍,springboot整合redis的配置,以及spring-data-redis是如何提供便捷的 ...
SpringBoot整合 ActiveMQ、SpringBoot整合RabbitMQ、SpringBoot整合Kafka
1.概念:SpringBoot 整合消息服务2.具体内容对于异步消息组件在实际的应用之中会有两类:· JMS:代表作就是 ActiveMQ,但是其性能不高,因为其是用 java 程序实现的:· AMQ ...
创新实训(9)——SpringBoot整合solr
SpringBoot整合solr 相关配置实体类DmsArticle 查询逻辑 SolrController SolrService SolrServiceImpl 查询结果插入逻辑相关配置 D ...
SpringBoot整合Spring Data Elasticsearch
特点: 分布式,无需人工搭建集群(solr就需要人为配置,使用Zookeeper作为注册中心) Restful风格,一切API都遵循Rest原则,容易上手近实时搜索,数据更新在Elasticsear ...
SpringBoot SpringBoot 开发实用篇 5 整合第三方技术 5.21 SpringBoot 整合 ActiveMQ
SpringBoot [黑马程序员SpringBoot2全套视频教程,springboot零基础到项目实战(spring boot2完整版)] SpringBoot 开发实用篇文章目录 Spring ...

springboot整合ueditor上传图片配置（JSP）从新建项目开始

第一步：

第二步：

第三步(配置后台)：

springboot整合ueditor上传图片配置（JSP）从新建项目开始相关推荐

最新文章

热门文章