1.先去官网上下载百度的Ueditor，下载完以后解压为
2.创建一个springboot项目
3.将ueditor文件夹粘贴到springboot的resource/static下，目录结构如下 如图
4.pom文件中加入文件上传相关的jar包，
<!--Ueditor依赖的jar包-->
<dependency>
<groupId>commons-fileupload</groupId>
<artifactId>commons-fileupload</artifactId>
<version>1.3.1</version>
</dependency>
<dependency>
<groupId>commons-io</groupId>
<artifactId>commons-io</artifactId>
<version>2.4</version>
</dependency>
<dependency>
<groupId>org.json</groupId>
<artifactId>json</artifactId>
<version>20170516</version>
</dependency>
<dependency>
<groupId>commons-codec</groupId>
<artifactId>commons-codec</artifactId>
<version>1.9</version>
</dependency>
5.将ueditor/jsp/lib/ueditor-1.1.2.jar加入到项目中
（1）点击File的project Structure
(2)点击Modules以后，再点击Scope旁边的绿色加号
(3)点击Jar or Directories
（4）选中Ueditorjar包，加入项目中
6.在templates中创建index.html
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="ueditor/ueditor.config.js"></script>
<script src="ueditor/ueditor.all.js/ueditor.all.min.js"></script>
<script src="ueditor/lang/zh-cn/zh-cn.js"></script>
<script src="ueditor/ueditor.all.js"></script>
</head>
<body>
<textarea name="content" id="content" style="min-height: 500px"></textarea>
</body>
<script type="text/javascript">
var ue = UE.getEditor('content');
UE.Editor.prototype._bkGetActionUrl = UE.Editor.prototype.getActionUrl;
UE.Editor.prototype.getActionUrl = function(action) {
if (action == '/upload') {
return '/upload'; //在这里返回我们实际的上传图片地址
} else {
return this._bkGetActionUrl.call(this, action);
}
}
</script>
</html>
7.随便弄一个Controller进入到index.html 中
package com.wu.myapp.controller;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
@Controller
public class UeditorController {
@RequestMapping("/login")
public String getIndex(){
return "index";
}
}
8.在ueditor/ueditor.config.js中修改为使用自己的文件上传
之前的为
var URL = window.UEDITOR_HOME_URL || getUEBasePath();
//创建自己的文件上传请求路径
var server_url=window.location.protocol+"//"+window.location.hostname+":"+window.location.port
/**
* 配置项主体。注意，此处所有涉及到路径的配置别遗漏URL变量。
*/
window.UEDITOR_CONFIG = {
//为编辑器实例添加一个路径，这个不能被注释
UEDITOR_HOME_URL: URL
// 服务器统一请求接口路径
// , serverUrl: URL + "jsp/controller.jsp"
, serverUrl: server_url+"/config"
//imageActionName定义了图片上传后台类及方法
, imageActionName:"/upload"
,imageFieldName: "upfile"
//上传图片后缀
, imageAllowFiles: [".png", ".jpg", ".jpeg", ".gif", ".bmp"]
// ,imageUrlPr图片页面回显默认的前缀
,imageUrlPrefix:"http://localhost:8080/ueditor/jsp/"
//文件上传格式
,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"
]
//工具栏上的所有的功能按钮和下拉框，可以在new编辑器的实例时选择自己需要的重新定义
9.创建一个单独的配置Controller
package com.wu.myapp.controller;
import com.baidu.ueditor.ActionEnter;
import org.springframework.stereotype.Controller;
import org.springframework.util.ClassUtils;
import org.springframework.web.bind.annotation.RequestMapping;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.io.PrintWriter;
@Controller
public class ServerController {
@RequestMapping(value = "/config")
public void config(HttpServletRequest request, HttpServletResponse response) {
//在上传文件后，会返回response，
//通常会导致客户端（浏览器）不能识别内容编码，
// 如果客户端(浏览器)采用非UTF-8方式(比如gbk)解码，
// 客户端就会产生乱码问题。
response.setContentType("application/json");
String rootPath = request.getSession().getServletContext().getRealPath("/");
try {
response.setCharacterEncoding("UTF-8");
String exec = new ActionEnter(request, rootPath).exec();
System.out.println(exec);
PrintWriter writer = response.getWriter();
writer.write(new ActionEnter(request, rootPath).exec());
writer.flush();
writer.close();
} catch (IOException e) {
e.printStackTrace();
}
}
}
10.配置上传的controller
package com.wu.myapp.controller;
import org.springframework.stereotype.Controller;
import org.springframework.util.FileCopyUtils;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.multipart.MultipartFile;
import javax.servlet.ServletOutputStream;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.File;
import java.io.FileInputStream;
import java.io.FileOutputStream;
import java.io.OutputStream;
import java.util.HashMap;
import java.util.Map;
@Controller
public class UEditorConfigController {
@RequestMapping(value="/upload")
@ResponseBody
public Map<String, Object> images (@RequestParam(value = "upfile", required = false) MultipartFile file, HttpServletRequest request, HttpServletResponse response){
Map<String, Object> params = new HashMap<String, Object>();
if (file == null){
System.out.println("上传文件为空!");
return null;
}
try{
//getOriginalFilename获取上传的时候文件名
String fileName = file.getOriginalFilename();
// System.out.println(fileName);
//文件后缀
String suffix = fileName.substring(fileName.lastIndexOf("."),fileName.length());
//可以改名字，应该为传入数据库的保存图片的路径，
//这里仅为测试，就随便起个名字，但是不要为中文
//如果为中文，图片回显的时候，参数为中文，有些浏览器默认不支持中文参数
String im="xmz";
File f= new File("src/main/resources/static/ueditor/jsp/"+im+suffix);
OutputStream out = new FileOutputStream(f);
FileCopyUtils.copy(file.getInputStream(), out);
//类似为一个状态码的东西，其中state属性和url是必须的
params.put("state", "SUCCESS");
//获取路径
params.put("url", im+suffix);
params.put("size", file.getSize());
params.put("type", file.getContentType());
params.put("filename", file.getOriginalFilename());
} catch (Exception e){
params.put("state", "ERROR");
e.printStackTrace();
}
return params;
}
}
配置完成，启动项目输入
http://localhost:8080/login
进入index.xml
点击上传图片
选一张，然后上传
上传成功后会图片会自动回显
其他的富文本编辑器，大致套路相同
上面的代码注释是按照我的理解写的，可能有一些偏差。
1395
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
