wangEditor+SringBoot富文字編輯器使用（圖片上傳）
阿新 • • 發佈：2018-12-16
最近專案中使用到了wangEditor外掛，在此記錄使用過程。
思路：點選外掛中上傳圖片，圖片上傳至伺服器臨時圖片資料夾下，當最後點選確認儲存按鈕時，再把臨時資料夾下的圖片複製到正式的資料夾下面。
在HTML中引入wangEditor.js：
<!--引入wangEditor中的js檔案-->
<script src="../plugins/wangEditor-3.1.1/release/wangEditor.js"></script>HTML中只需要頂一個富文字編輯器容器
<div id="editor1" style="height: 180px;margin-bottom: 20px"> </div>
js初始化wangEditor：
<!--初始化富文字編輯器--> <script type="text/javascript"> var editor1 = new wangEditor('#editor1'); //單選資訊富文字編輯器 editor1.customConfig.menus = [ 'head', // 標題 'bold', // 粗體 'italic', // 斜體 'underline', // 下劃線 'justify', // 對齊方式 'image', // 插入圖片 'undo', // 撤銷 'redo' // 重複 ], // 使用 base64 儲存圖片 editor1.customConfig.uploadImgShowBase64 = true; // 隱藏“網路圖片”tab editor1.customConfig.showLinkImg = false; // 限制一次最多上傳 3 張圖片 editor1.customConfig.uploadImgMaxLength = 3; //上傳圖片 將圖片以檔案的形式傳給後臺進行操作返回圖片 url editor1.customConfig.customUploadImg = function (files, insert) { var da = new FormData(); if (files[0].size > maxsize) { layer.msg("上傳圖片大小不能超過2M！") } else { da.append("file", files[0]); $.ajax({ type: "POST", url: httpRequestUrl + "/editorPic", data: da, async: false, cache: false, contentType: false, processData: false, success: function (result) { insert(result.data); //insert 是獲取圖片 url 後，插入到編輯器的方法 } }); } }; //建立富文字編輯器 editor1.create(); </script>
editorPic介面給後臺傳圖片檔案，後臺返回圖片存入臨時檔案的路徑：
/** * 富文字圖片存入臨時資料夾 * * @param file * @param req * @return * @throws Exception */ @RequestMapping(value = "/editorPic", method = RequestMethod.POST, headers = "Accept=application/json") @ResponseBody public HttpResponseEntity updateLabel(@RequestParam(value = "file", required = false) MultipartFile file, HttpServletRequest req) throws Exception { HttpResponseEntity httpResponseEntity = new HttpResponseEntity(); String parent = remoteProperties.getBaseUrl() + "temp/"; MultipartFile[] multipartFiles = new MultipartFile[1]; multipartFiles[0] = file; FileOperate fileOperate = new FileOperate(); List<String> editorPic = fileOperate.imageUpload(multipartFiles, parent); if (!editorPic.isEmpty()) { httpResponseEntity.setCode(Constans.SUCCESS_CODE); httpResponseEntity.setData(remoteProperties.getHttpUrl() + "temp/" + editorPic.get(0)); } else { logger.error("editorPic 富文字編輯器臨時圖片的儲存 >>>>>>>>>>> 異常"); httpResponseEntity.setCode(Constans.EXIST_CODE); httpResponseEntity.setMessage(Constans.EXIST_MESSAGE); } return httpResponseEntity; }
HttpResponseEntity.java：package com.aim.questionbanksystem.beans;
import lombok.Data;
import java.io.Serializable;
@Data
public class HttpResponseEntity implements Serializable {
private String code; //狀態碼
private Object data; //內容
private String message; //狀態訊息
}RemoteProperties.java：package com.aim.questionbanksystem.config.properties;
import lombok.Data;
import org.springframework.boot.context.properties.ConfigurationProperties;
import org.springframework.context.annotation.Configuration;
import org.springframework.context.annotation.PropertySource;
import org.springframework.stereotype.Component;
@Configuration
@ConfigurationProperties(prefix = "remote", ignoreUnknownFields = false)
@PropertySource(value = {"classpath:config/remote.properties"},encoding="utf-8")
@Data
@Component
public class RemoteProperties {
private String uploadFilesUrl;
private String uploadPicUrl;
private String httpUrl;
private String baseUrl;
private String webUrl;
private String msgTemplateModuleCodeReg;
private String msgTemplateModuleCodeFindPsw;
private String msgSignName;
private String codeLegalTime;
}
remote.properties:#本地地址
remote.httpUrl=http://localhost:8085/imgFiles/
remote.baseUrl=D:/TDDOWNLOAD/tomcat8.0.38-1-normal/apache-tomcat-8.0.38/webapps/imgFiles/以上步驟為，點選富文字上傳圖片，將圖片上傳至伺服器臨時圖片資料夾。
當點選確認儲存內容（儲存富文字編輯器內容，將內容存至資料庫）的時候：
js：
function insert(){
var editorContent = editor1.txt.html();
var data = {
"editorContent": editorContent,
}
commonAjaxPost(true, '/insert', data, function(result){
console.log(result);
});
}service層：
public int addQuestionInfo(Map<String, Object> map) {
TestEntity testEntity = new TestEntity ();
testEntity .setEditorContent(map.get("editorContent").toString());
//題幹內容配圖存入資料庫的父路徑
String picImport = "final/";
FileOperate fileOperate = new FileOperate();
File dir = new File(remoteProperties.getBaseUrl() + picImport);
//新聞配圖儲存路徑
String picParent = remoteProperties.getBaseUrl() + picImport;
//拆分內容中的圖片
String regex = "/final/"; //正式資料夾
String replacement = "/temp/"; //臨時資料夾
List<String> pics = matchPic(testEntity.getEditorContent(), regex, replacement);
//題幹內容中有圖片
if (!pics.isEmpty()) {
String imgUrl = "";
//題幹內容圖片存入資料庫的附路徑
String newsContentPicImport = "final/";
//題乾圖片原路徑
String oldContentPicImport = "temp/";
//題幹內容圖片儲存路徑
String newsContentPictureParent = remoteProperties.getBaseUrl() + newsContentPicImport;
for (int f = 0; f < pics.size(); f++) {
if (f == 0) {
imgUrl += pics.get(f);
} else {
imgUrl += "," + pics.get(f);
}
int i = 0;
try {
i = fileOperate.copyFile(oldContentPicImport + pics.get(f), newsContentPictureParent + pics.get(f), remoteProperties.getBaseUrl());
} catch (Exception e) {
e.printStackTrace();
}
if (i == 0) {
fileOperate.deleteDir(dir);
return 0;
} else if (i == -1) {
fileOperate.deleteDir(dir);
return -1;
} else if (i == -2) {
fileOperate.deleteDir(dir);
return -2;
}
}
testEntity.setEsitorContent(testEntity.getEditorContent().replaceAll(replacement, regex));
}
int i = testEntityMapper.addQuestionInfo(testEntity);
if (i != 0) {
//fileOperate.deleteDir(dir);
return 1;
} else {
//fileOperate.deleteDir(dir);
return -3;
}
}
public List<String> matchPic(String content, String regex, String replacement) {
List<String> pics = new ArrayList<String>();
Document document = Jsoup.parse(content.replaceAll(regex, replacement));
Elements ele = document.getElementsByTag("img");
for (int i = 0; i < ele.size(); i++) {
String imgU = ele.get(i).attr("src");
pics.add(i, imgU.substring(imgU.indexOf("temp/") + 5, imgU.length()));
}
return pics;
}存到資料庫的欄位內容：
