第一步：
一、去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)
@ResponseBody
public 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)
@ResponseBody
public 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上传视频
3664
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
