点击链接下载以下资源
链接: 下载所需资源.
将下载的文件拷贝到项目中
以下是已maven项目举例
1.写一个页面，要导入所需要的四个js文件，
js文件都在导入的那个文件中，文件名一样就行
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>Title</title>
<script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-3.4.1.js"></script>
<script type="text/javascript" charset="utf-8" src="${pageContext.request.contextPath}/js/Ueditor/ueditor.config.js"></script>
<script type="text/javascript" charset="utf-8" src="${pageContext.request.contextPath}/js/Ueditor/ueditor.all.min.js"> </script>
<!--建议手动加在语言，避免在ie下有时因为加载语言失败导致编辑器加载失败-->
<!--这里加载的语言文件会覆盖你在配置项目里添加的语言类型，比如你在配置项目里配置的是英文，这里加载的中文，那最后就是中文-->
<script type="text/javascript" charset="utf-8" src="${pageContext.request.contextPath}/js/Ueditor/lang/zh-cn/zh-cn.js"></script>
</head>
<body>
<!-- 给富文本框设置一个显示区域 -->
<script id="editor" name="content" type="text/plain" style="width:1024px;height:400px;"></script>
<script type="text/javascript">
<!-- 初始化富文本框 -->
var ue = UE.getEditor('editor');
</script>
</body>
</html>启动可看到富文本框已经显示出来了
配置图片上传功能
2.添加必要的依赖
<!-- 图片上传 -->
<dependency>
<groupId>com.baidu</groupId>
<artifactId>ueditor</artifactId>
<version>1.1.2</version>
</dependency>
<dependency>
<groupId>com.json</groupId>
<artifactId>json</artifactId>
<version>1.1</version>
</dependency>
<dependency>
<groupId>commons-fileupload</groupId>
<artifactId>commons-fileupload</artifactId>
<version>1.2.1</version>
</dependency>
<dependency>
<groupId>commons-io</groupId>
<artifactId>commons-io</artifactId>
<version>2.0.1</version>
</dependency>注意：如果添加失败或者没起作用，用以下方式
将刚才拷入的文件中的两个jar包复制到桌面
执行maven命令
输入以下命令（记得改为你自己的保存路径）：
安装：json包到本地仓库
mvn install:install-file -Dfile=C:\Users\Administrator\Desktop\ueditor\jsp\lib\json.jar -DgroupId=com.json -DartifactId=json -Dversinotallow=1.1 -Dpackaging=jar
安装： ueditor包到本地仓库
mvn install:install-file -Dfile=C:\Users\Administrator\Desktop\ueditor\jsp\lib\ueditor-1.1.2.jar -DgroupId=com.baidu -DartifactId=ueditor -Dversinotallow=1.1.2 -Dpackaging=jar
3.修改config.json文件：
4.在springmvc.xml中添加配置
<!-- 定义文件上传解析器 -->
<bean id="multipartResolver"
class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
<!-- 设定默认编码 -->
<property name="defaultEncoding" value="UTF-8"></property>
<!-- 设定文件上传的最大值5MB，5*1024*1024 -->
<property name="maxUploadSize" value="5242880"></property>
</bean>5.页面中添加以下代码
UE.Editor.prototype._bkGetActionUrl=UE.Editor.prototype.getActionUrl;
UE.Editor.prototype.getActionUrl=function (action) {
//要和配置文件config.json文件中的imageActionName值一样
if(action == 'uploadimage' || action == 'uploadvideo'){
//这里调用我们后端写的上传图片的接口
return "/pms/files/upload";
}else {
return this._bkGetActionUrl.call(this,action);
}
}
6.写接口
@Controller
@RequestMapping("/files")
public class FilesController {
@RequestMapping(value = "upload",method = RequestMethod.POST)
@ResponseBody
public Map<String,Object> upload(MultipartFile upfile, HttpSession session){
String filename = upfile.getOriginalFilename();
filename= UUID.randomUUID().toString().replaceAll("-","")+"_"+filename;
ServletContext application = session.getServletContext();
String realPath = application.getRealPath("/upload");
File file = new File(realPath);
if(!file.exists()){
file.mkdirs();
}
File file1 = new File(realPath + "/" + filename);
try{
upfile.transferTo(file1);
}catch (IOException ex){
ex.printStackTrace();
}
Map<String, Object> result = new HashMap<String,Object>();
//图片后缀
String last = upfile.getOriginalFilename().substring(upfile.getOriginalFilename().lastIndexOf("."), upfile.getOriginalFilename().length());
//成功必须为SUCCESS,必须大写
result.put("state", "SUCCESS");
//上传之后要访问的路径：会和config.json文件imageUrlPrefix的参数值拼接起来
result.put("url", "upload/"+filename);
//原始文件名
result.put("original", upfile.getOriginalFilename());
//图片后缀
result.put("type", last);
//文件大小
result.put("size", upfile.getSize());
//加上uuid之后的文件名
result.put("title", filename);
return result;
}
}结束啦，快去测试以下吧
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
