點擊鏈接下載以下資源
鏈接: 下載所需資源.
將下載的文件拷貝到項目中
以下是已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 -Dversion=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 -Dversion=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;
}
}
結束啦，快去測試以下吧
