1、先给大家拜个早年! 看个效果图:
2、去百度官网下载UEditor。机票
3、下载下来是这样的:
# config.json 配置文件(需要引用)
# controller.jsp springboot默认不支持jsp的,所以在这里咱也不用。
# ueditor.config.js 这个需要,直接引入页面就行了。一共引入三个就行了
<!-- 容器 -->
<script id="editor" type="text/plain" style="width:100%;"></script>
<script th:src="@{/static/components/ueditor-utf8/ueditor.config.js}"></script>
<script th:src="@{/static/components/ueditor-utf8/ueditor.all.min.js}"></script>
<script th:src="@{/static/components/ueditor-utf8/lang/zh-cn/zh-cn.js}"></script>
4、上代码(后台一共三个类):
/**
* ueditor config.json 配置文件
* @author : fyk
* @create : 2019/10/19 13:46
**/
public class UEditConfig {
public final static String UEDITOR_CONFIG = "{\n" +
" \"imageActionName\": \"uploadimage\",\n" +
" \"imageFieldName\": \"upfile\",\n" +
" \"imageMaxSize\": 2048000,\n" +
" \"imageAllowFiles\": [\".png\", \".jpg\", \".jpeg\", \".gif\", \".bmp\"],\n" +
" \"imageCompressEnable\": true,\n" +
" \"imageCompressBorder\": 1600,\n" +
" \"imageInsertAlign\": \"none\",\n" +
" \"imageUrlPrefix\": \"\",\n" +
" \"imagePathFormat\": \"/ueditor/jsp/upload/image/{yyyy}{mm}{dd}/{time}{rand:6}\",\n" +
"\n" +
" \"scrawlActionName\": \"uploadscrawl\",\n" +
" \"scrawlFieldName\": \"upfile\",\n" +
" \"scrawlPathFormat\": \"/ueditor/jsp/upload/image/{yyyy}{mm}{dd}/{time}{rand:6}\",\n" +
" \"scrawlMaxSize\": 2048000,\n" +
" \"scrawlUrlPrefix\": \"\",\n" +
" \"scrawlInsertAlign\": \"none\",\n" +
"\n" +
" \"snapscreenActionName\": \"uploadimage\",\n" +
" \"snapscreenPathFormat\": \"/ueditor/jsp/upload/image/{yyyy}{mm}{dd}/{time}{rand:6}\",\n" +
" \"snapscreenUrlPrefix\": \"\",\n" +
" \"snapscreenInsertAlign\": \"none\",\n" +
"\n" +
" \"catcherLocalDomain\": [\"127.0.0.1\", \"localhost\", \"img.baidu.com\"],\n" +
" \"catcherActionName\": \"catchimage\",\n" +
" \"catcherFieldName\": \"source\",\n" +
" \"catcherPathFormat\": \"/ueditor/jsp/upload/image/{yyyy}{mm}{dd}/{time}{rand:6}\",\n" +
" \"catcherUrlPrefix\": \"\",\n" +
" \"catcherMaxSize\": 2048000,\n" +
" \"catcherAllowFiles\": [\".png\", \".jpg\", \".jpeg\", \".gif\", \".bmp\"],\n" +
"\n" +
" \"videoActionName\": \"uploadvideo\",\n" +
" \"videoFieldName\": \"upfile\",\n" +
" \"videoPathFormat\": \"/ueditor/jsp/upload/video/{yyyy}{mm}{dd}/{time}{rand:6}\",\n" +
" \"videoUrlPrefix\": \"\",\n" +
" \"videoMaxSize\": 102400000,\n" +
" \"videoAllowFiles\": [\n" +
" \".flv\", \".swf\", \".mkv\", \".avi\", \".rm\", \".rmvb\", \".mpeg\", \".mpg\",\n" +
" \".ogg\", \".ogv\", \".mov\", \".wmv\", \".mp4\", \".webm\", \".mp3\", \".wav\", \".mid\"],\n" +
"\n" +
" \"fileActionName\": \"uploadfile\",\n" +
" \"fileFieldName\": \"upfile\",\n" +
" \"filePathFormat\": \"/ueditor/jsp/upload/file/{yyyy}{mm}{dd}/{time}{rand:6}\",\n" +
" \"fileUrlPrefix\": \"\",\n" +
" \"fileMaxSize\": 51200000,\n" +
" \"fileAllowFiles\": [\n" +
" \".png\", \".jpg\", \".jpeg\", \".gif\", \".bmp\",\n" +
" \".flv\", \".swf\", \".mkv\", \".avi\", \".rm\", \".rmvb\", \".mpeg\", \".mpg\",\n" +
" \".ogg\", \".ogv\", \".mov\", \".wmv\", \".mp4\", \".webm\", \".mp3\", \".wav\", \".mid\",\n" +
" \".rar\", \".zip\", \".tar\", \".gz\", \".7z\", \".bz2\", \".cab\", \".iso\",\n" +
" \".doc\", \".docx\", \".xls\", \".xlsx\", \".ppt\", \".pptx\", \".pdf\", \".txt\", \".md\", \".xml\"\n" +
" ],\n" +
"\n" +
" \"imageManagerActionName\": \"listimage\",\n" +
" \"imageManagerListPath\": \"/ueditor/jsp/upload/image/\",\n" +
" \"imageManagerListSize\": 20,\n" +
" \"imageManagerUrlPrefix\": \"\",\n" +
" \"imageManagerInsertAlign\": \"none\",\n" +
" \"imageManagerAllowFiles\": [\".png\", \".jpg\", \".jpeg\", \".gif\", \".bmp\"],\n" +
"\n" +
" \"fileManagerActionName\": \"listfile\",\n" +
" \"fileManagerListPath\": \"/ueditor/jsp/upload/file/\",\n" +
" \"fileManagerUrlPrefix\": \"\",\n" +
" \"fileManagerListSize\": 20,\n" +
" \"fileManagerAllowFiles\": [\n" +
" \".png\", \".jpg\", \".jpeg\", \".gif\", \".bmp\",\n" +
" \".flv\", \".swf\", \".mkv\", \".avi\", \".rm\", \".rmvb\", \".mpeg\", \".mpg\",\n" +
" \".ogg\", \".ogv\", \".mov\", \".wmv\", \".mp4\", \".webm\", \".mp3\", \".wav\", \".mid\",\n" +
" \".rar\", \".zip\", \".tar\", \".gz\", \".7z\", \".bz2\", \".cab\", \".iso\",\n" +
" \".doc\", \".docx\", \".xls\", \".xlsx\", \".ppt\", \".pptx\", \".pdf\", \".txt\", \".md\", \".xml\"\n" +
" ] \n" +
"\n" +
"}";
}
/**
* 返回状态
* @author : fyk
* @create : 2019/10/19 9:51
**/
@SuppressWarnings("all")
@Data
public class Ueditor {
public static final String SUCCESS = "SUCCESS";// 成功
public static final String ERROR = "ERROR"; // 失败
/** 状态 SUCCESS/ERROR **/
private String state;
/** 图片回显的地址 **/
private String url;
/** title提示 **/
private String title;
/** 上传前的图片名 **/
private String original;
}
import com.smoke.commons.utils.Commons;
import com.smoke.commons.utils.UploadUtils;
import org.apache.commons.lang.StringUtils;
import org.springframework.beans.factory.annotation.Value;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.RestController;
import org.springframework.web.multipart.MultipartFile;
import com.alibaba.fastjson.JSONObject;
import javax.servlet.http.HttpServletResponse;
import java.io.File;
import java.io.IOException;
import java.util.*;
/**
* editor 自定义上传控制层
* @author : fyk
* @create : 2019/10/19 9:55
**/
@RestController
@RequestMapping(value = "/ueditUploadController")
public class UeditController {
// 拿到配置文件配置的路径(文件服务器的路径)
@Value("${upload.url}")
private String fileServerUrl;
/**
* 获取config.json配置文件
* @author : fyk
* @create : 2019/10/19 14:09
**/
@RequestMapping(value="/config")
public String index() {
return UEditConfig.UEDITOR_CONFIG;
}
/**
* 自定义文件上传方法
* @author : fyk
* @create : 2019/10/19 14:09
**/
@RequestMapping(value = "/upload")
public Map<String, Object> upload(@RequestParam(value = "upfile", required = false) MultipartFile pic,
String type, HttpServletResponse response) throws IOException {
// 返回对象,需要json格式
Ueditor ueditor = new Ueditor();
// 文件保存路径前缀(smoke-是我这个项目的名称: 可忽略)
String saveUrl = fileServerUrl + "smoke";
if (StringUtils.isNotBlank(type)) {
if (type.startsWith("imgs")) {
saveUrl += "/imgs/";
}else if (type.startsWith("videos")) {
saveUrl += "/videos/";
}else{
saveUrl += "/files/";
}
} else {
saveUrl += "/";
}
try {
// 获取文件名
String fileName = pic.getOriginalFilename();
// 保存上传时的文件名(暂时)
String oldName = fileName;
// 获取文件的后缀suffix
String fileSuffix = fileName.substring(fileName.indexOf(".") + 1);
// 我用UUID作文件名: 防止重复、防止乱码
fileName = Commons.getUUID() + "." + fileSuffix;
// 推送到服务器(怎么推送, 看我另一篇博客, 下面是链接)
// https://blog.csdn.net/qq_40058321/article/details/97277552
String returnPath = UploadUtils.uploadFile(pic.getBytes(), saveUrl, fileName);
ueditor.setState(Ueditor.SUCCESS);
ueditor.setTitle(oldName);
// 上传之后回显的路径,我这里是文件服务器返回的图片路径
ueditor.setUrl(returnPath);
ueditor.setOriginal(pic.getName());
} catch (Exception e) {
ueditor.setState(Ueditor.ERROR);
e.printStackTrace();
}
response.getWriter().print(JSONObject.toJSON(ueditor));
return null;
}
}
5、上Maven依赖:
<dependency>
<groupId>commons-codec</groupId>
<artifactId>commons-codec</artifactId>
</dependency>
<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>cn.songxinqiang</groupId>
<artifactId>com.baidu.ueditor</artifactId>
<version>1.1.2-offical</version>
</dependency>
<!-- 还有一个json包 我用的是 -->
<dependency>
<groupId>org.json</groupId>
<artifactId>json</artifactId>
<version>20180813</version>
</dependency>
7、js初始化百度编辑器:
// 自定义上传路径
UE.Editor.prototype._bkGetActionUrl = UE.Editor.prototype.getActionUrl;
UE.Editor.prototype.getActionUrl = function(action) {
// 对应的是后台upload那个方法
if (action == 'uploadimage' || action == 'uploadscrawl' || action == 'listimage') {
return '/ueditUploadController/upload?type=imgs';
} if (action == 'uploadvideo'){
return '/ueditUploadController/upload?type=videos';
} if (action == 'uploadfile'){
return '/ueditUploadController/upload?type=files';
} else {
return this._bkGetActionUrl.call(this, action);
}
}
// 实例化编辑器
// 建议使用工厂方法getEditor创建和引用编辑器实例,如果在某个闭包下引用该编辑器
// 直接调用UE.getEditor('editor')就能拿到相关的实例
// 官方文档地址: http://fex.baidu.com/ueditor/
var ue = UE.getEditor('editor');
6、当然最后还有最重要的一步,加载后台配置(修改服务器同一请求接口路径- ueditor.config.js):
一定要修改,否则无法加载后台配置!
其实config.js、controller.jsp,不需要做任何修改!
看了不少别人的博客,他们的博客地址我就不一一贴在这里了,有些写的很繁琐,简单点!
①下载 ②创建三个类 ③修改一个接口路径 ④页面引入、以及js初始化编辑器