ueditor 导入html文件夹,springboot 整合 ueditor 并实现文件上传（自定义上传路径）...-CSDN博客

咱们是java的springboot整合的，因此咱们直接下载jsp版本的html

在springboot的resources目录下的satic下新建文件夹 ueditor，而后把刚下载压缩包解压进该目录java

接下来咱们修改根目录下 ueditor.config.js 这个文件jquery

由于springboot默认是不支持jsp的，而这个又是jsp版本的，咱们须要将这个调用jsp的接口，换成咱们本身写的接口web

(该接口其实就是为了调用jsp目录下的config.json，咱们本身写一个接口读取该JSON文件到String ，而后返回便可)spring

(ueditor官方要求这个json文件来读取配置各类文件的上传等操做，不改的话文件上传功能用不了)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官方配置文件的接口，而后编写咱们自定义的接口，将文件上传到咱们自定义的位置

ueditor编辑器

标题：

提交

$(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);

}

});

3.而后重点来了，自定义实现文件上传的代码，这里放的是图片的上传接口，ueditor他还有 file文件、涂鸦、截图、视频等类型文件的上传，分别调用不一样的接口，同样是在上面那段 js 代码那里覆盖，不一样文件类型接口代码几乎同样，只是不一样类型文件可能须要作不一样的处理罢了，这里我就放其中一个上传图片的

@RequestMapping("uploadImageData")

@ResponseBody

public Map 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 map = new HashMap();

//是否上传成功

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;}

欢迎指出个人错误！