1.先去官网下载 ueditor 的源码 http://ueditor.baidu.com/website/download.html
我们是java的springboot整合的,所以我们直接下载jsp版本的
在springboot的resources目录下的satic下新建文件夹 ueditor,然后把刚下载压缩包解压进该目录
接下来我们修改根目录下 ueditor.config.js 这个文件
因为springboot默认是不支持jsp的,而这个又是jsp版本的,我们需要将这个调用jsp的接口,换成我们自己写的接口
(该接口其实就是为了调用jsp目录下的config.json,我们自己写一个接口读取该JSON文件到String ,然后返回即可)
(ueditor官方要求这个json文件来读取配置各种文件的上传等操作,不改的话文件上传功能用不了)
接口代码
@Controller
@RequestMapping("/ueditor")
public class UeditorController {
@RequestMapping("/config")
@ResponseBody
public String config(HttpServletRequest request, HttpServletResponse response) {
String json = "";
response.setContentType("application/json");
// 获取项目在磁盘的绝对路径
String path = ClassUtils.getDefaultClassLoader().getResource("").getPath();
try {
// 将josn文件读到Stirng
json = IOUtils.toString(new FileInputStream(new File(path + "/static/ueditor/utf8-jsp/jsp/config.json")), Charsets.UTF_8.toString());
} catch (Exception e) {
e.printStackTrace();
}
return json;
}
}
记得修改config.json配置文件后,要重启项目,最好清一下浏览器缓存
2.编写一个简单的html页面,展示下ueditor的效果
其实引入ueditor的js文件,然后在js里实例化ueditor即可。
js里下面那一部分代码是为了手动指定上传文件调用的接口(不同文件类型不同接口)
肯定有人疑问,这是第三方写的插件,我怎么上传文件,他上传到哪?
* 其实方法有很多种,我这里选择自己编写接口实现上传,原理很简单,先在js里覆盖ueditor官方配置文件的接口,然后编写我们自定义的接口,将文件上传到我们自定义的位置
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>ueditor编辑器</title>
<!-- jq -->
<script src="http://code.jquery.com/jquery-latest.js"></script>
<!-- 配置文件 -->
<script type="text/javascript" charset="utf-8" src="/ueditor/utf8-jsp/ueditor.config.js"></script>
<!-- 编辑器源码文件 -->
<script type="text/javascript" charset="utf-8" src="/ueditor/utf8-jsp/ueditor.all.js"></script>
<script type="text/javascript" charset="utf-8" src="/ueditor/utf8-jsp/lang/zh-cn/zh-cn.js"></script>
</head>
<body>
<form action="/ueditor/submit" method="post">
标题:<input type="text" name="title"/><br/>
<!-- 加载编辑器的容器 -->
<div id="ueditor" name="ueditor" style="width: 600px"></div>
<button type="submit">提交</button>
</form>
<!-- 实例化编辑器 -->
<script type="text/javascript">
$(function() {
var ue = UE.getEditor('ueditor');
// 手动指定上传文件调用的接口(不同文件类型不同接口)
UE.Editor.prototype._bkGetActionUrl = UE.Editor.prototype.getActionUrl;
UE.Editor.prototype.getActionUrl = function(action) {
// 这里很重要,很重要,很重要,要和配置中的imageActionName值一样
if(action == 'uploadimage'){
// 这里调用后端我们写的图片上传接口
return '/ueditor/uploadImageData';
}else if(action == 'uploadfile'){
return '/ueditor/uploadFileData';
}else{
return this._bkGetActionUrl.call(this, action);
}
}
});
</script>
</body>
</html>
3.然后重点来了,自定义实现文件上传的代码,这里放的是图片的上传接口,ueditor他还有 file文件、涂鸦、截图、视频 等类型文件的上传,分别调用不同的接口,一样是在上面那段 js 代码那里覆盖,不同文件类型接口代码几乎一样,只是不同类型文件可能需要做不同的处理罢了,这里我就放其中一个上传图片的
@RequestMapping("uploadImageData")
@ResponseBody
public Map<String,String> uploadImage(@RequestParam("upfile") MultipartFile upfile, HttpServletRequest request) throws IOException {
//文件原名称
String fileName = upfile.getOriginalFilename();
// 保存文件的新名字
String nowName = UUID.randomUUID()+fileName.substring(upfile.getOriginalFilename().lastIndexOf("."));
String uploadPath = "";
if(!upfile.isEmpty()){
String path = "F:/ueditor/upload/image/";
File f = new File(path);
if(!f.exists()){
// 第一次上传文件新建文件夹
f.mkdirs();
}
uploadPath = path+nowName;
//按照路径新建文件
File newFile = new File(uploadPath);
if(!newFile.exists()){
newFile.createNewFile();
}
//复制
FileCopyUtils.copy(upfile.getBytes(), newFile);
}
//返回结果信息(UEditor官方要求这个json格式)
Map<String,String> map = new HashMap<String,String >();
//是否上传成功
map.put("state", "SUCCESS");
//现在文件名称
map.put("title", nowName);
//文件原名称
map.put("original", fileName);
//文件类型 .+后缀名
map.put("type", fileName.substring(upfile.getOriginalFilename().lastIndexOf(".")));
//文件路径
// map.put("url", uploadPath); // 浏览器不能直接访问项目外目录的图片等文件,需要做虚拟路径映射
map.put("url", "/PathImage/"+nowName); // 这个路径的 /PathImage/ 是在配置类里指定的映射到本地的绝对路径
//文件大小(字节数)
map.put("size", upfile.getSize()+"");
return map;
}
这里解释下上面的代码:
1)String path = "F:/ueditor/upload/image/"; 这行我们是直接指定了上传的路径是本地F盘的XXX,用我这种自定义的接口,就不同管config.json配置文件的路径了
2)还有,这个方法(也就是我们覆盖了上传的这个接口),必须要返回指定格式的json,这是editor官方的规范,不然上传的图片显示异常
4.这时候我们打开刚才那个html页面,发现图片上传页面似乎正常,还能选图片
但是,现实总是残忍的,等你点击开始上传,提示说上传成功,你点击确认,却发现图片回显不了,明明从路径上看是对的,为什么前台还报了个错,没错!
其实原因有两个,浏览器默认做了处理,不能访问该项目目录外的静态资源(例如图片),而且springboot默认也是只能访问指定的静态资源目录,所以就算你后台代码正确,文件也正常上传成功,但是前台报错,并且页面显示不出图片
怎么解决?
简单!
加个配置类配置虚拟路径的映射即可,原理就是当你发起一个url,里面对应的一段url对自动映射为你指定的本地绝对路径(注意这里要跟你上面的上传绝对路径对上。你也可以写到json文件,然后统一读取,可以保持一致性)
@Configuration
public class MyWebAppConfiguration extends WebMvcConfigurerAdapter {
/**
* Spring Boot中有默认的静态资源访问路径,浏览器也不允许访问项目目录外的资源文件
* 添加一些虚拟路径的映射
* 设置静态资源路径和上传文件的路径
*/
@Override
public void addResourceHandlers(ResourceHandlerRegistry registry) {
// /** 表示该目录下所有文件
registry.addResourceHandler("/PathImage/**").addResourceLocations("file:/F:/ueditor/upload/image/");
registry.addResourceHandler("/PathFile/**").addResourceLocations("file:/F:/ueditor/upload/file/");
super.addResourceHandlers(registry);
}
}
我这里放了上传图片和文件的虚拟路径映射,还有视频等自行根据格式添加即可
5.到这里基本已经可以了页面,上面我的html页面还有发起一个post请求,是为了测试后台获取的ueditor数据,这里放接口代码
@RequestMapping("/submit")
@ResponseBody
public String submit(HttpServletRequest request){
String title = request.getParameter("title");
String ueditor = request.getParameter("ueditor");
String result = "标题:"+title+"\n"+ueditor;
return result;
}
6.好!万事俱备,开始测试
运行项目,访问上面的html页面,根据喜好编辑文字,然后点击多图上传,上传好图片后点确定,已经可以上传图片到页面了
然后点击提交按钮,可以在接口上看到我们由前那段传来的数据,还有在页面返回的效果如下
测试成功,如果你没有成功,那你肯定是上面某个步骤漏了,建议再仔细看一遍!
7.如果你想修改编辑器的宽高,可以直接到 ueditor.config.js 搜索关键字,然后放开注释,写你要的值
initialFrameWidth :宽度
initialFrameHeight :高度
8.禁止显示元素路径 ,到 ueditor.config.js 搜索关键字
elementPathEnabled
9.禁止自动保存的功能
1)在ueditor.config.js,将 enableAutoSave 的注释去掉并设置成false,saveInterval 的注释也去掉设置成0;
2)修改ueditor.all.js,在'contentchange': function () {函数的第一行添加代码:
if (!me.getOpt('enableAutoSave')) {return;}
欢迎指出我的错误!