業務需求：
通過后台編輯文章和圖片，上傳到前端界面，展示新聞消息模塊。這個時候，需要一款簡潔的編輯器，百度編輯器是最常用的一種，但是功能太過於復雜，而wangEditor - 輕量級web富文本編輯器，配置方便，使用簡單。支持 IE10+ 瀏覽器，值得擁有。
wangEditor —— 輕量級 web 富文本編輯器，配置方便，使用簡單。支持 IE10+ 瀏覽器。
- 官網：www.wangEditor.com
- 文檔：www.kancloud.cn/wangfupeng/wangeditor3/332599
- 源碼：github.com/wangfupeng1988/wangEditor
使用示例：
前端代碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
.toolbar {
border: 1px solid #ccc;
width: 800px;
}
.text {
border: 1px solid #ccc;
height: 400px;
width: 800px;
}
</style>
</head>
<body>
<div id="div1" class="toolbar"></div>
<div style="padding: 5px 0; color: #ccc"></div>
<div id="div2" class="text">
<p>請在此輸入內容</p>
</div>
</body>
<script src="http://code.jquery.com/jquery-1.8.0.min.js"></script>
<script type="text/javascript" src="release/wangEditor.min.js"></script>
<script>
var E = window.wangEditor
var editor = new E('#div1', '#div2') // 兩個參數也可以傳入 elem 對象，class 選擇器
//開啟debug模式
editor.customConfig.debug = true;
// 關閉粘貼內容中的樣式
editor.customConfig.pasteFilterStyle = false
// 忽略粘貼內容中的圖片
editor.customConfig.pasteIgnoreImg = true
// 使用 base64 保存圖片
//editor.customConfig.uploadImgShowBase64 = true
// 上傳圖片到服務器
editor.customConfig.uploadFileName = 'myFile'; //設置文件上傳的參數名稱
editor.customConfig.uploadImgServer = 'upload.do'; //設置上傳文件的服務器路徑
editor.customConfig.uploadImgMaxSize = 3 * 1024 * 1024; // 將圖片大小限制為 3M
//自定義上傳圖片事件
editor.customConfig.uploadImgHooks = {
before: function(xhr, editor, files) {
},
success: function(xhr, editor, result) {
console.log("上傳成功");
},
fail: function(xhr, editor, result) {
console.log("上傳失敗,原因是" + result);
},
error: function(xhr, editor) {
console.log("上傳出錯");
},
timeout: function(xhr, editor) {
console.log("上傳超時");
}
}
editor.create()
</script>
</html>
服務器代碼
導入依賴：
<dependency>
<groupId>commons-fileupload</groupId>
<artifactId>commons-fileupload</artifactId>
<version>1.3.1</version>
</dependency>
pojo：
import java.util.Arrays;
public class WangEditor {
private Integer errno; //錯誤代碼，0 表示沒有錯誤。
private String[] data; //已上傳的圖片路徑
public WangEditor() {
super();
}
public WangEditor(String[] data) {
super();
this.errno = 0;
this.data = data;
}
public Integer getErrno() {
return errno;
}
public void setErrno(Integer errno) {
this.errno = errno;
}
public String[] getData() {
return data;
}
public void setData(String[] data) {
this.data = data;
}
@Override
public String toString() {
return "WangEditor [errno=" + errno + ", data=" + Arrays.toString(data)
+ "]";
}
}
Controller
//圖片上傳
@RequestMapping(value = "/upload",method=RequestMethod.POST)
@ResponseBody
public WangEditor uploadFile(
@RequestParam("myFile") MultipartFile multipartFile,
HttpServletRequest request) {
try {
// 獲取項目路徑
String realPath = request.getSession().getServletContext()
.getRealPath("");
InputStream inputStream = multipartFile.getInputStream();
String contextPath = request.getContextPath();
// 服務器根目錄的路徑
String path = realPath.replace(contextPath.substring(1), "");
// 根目錄下新建文件夾upload，存放上傳圖片
String uploadPath = path + "upload";
// 獲取文件名稱
String filename = MoteUtils.getFileName();
// 將文件上傳的服務器根目錄下的upload文件夾
File file = new File(uploadPath, filename);
FileUtils.copyInputStreamToFile(inputStream, file);
// 返回圖片訪問路徑
String url = request.getScheme() + "://" + request.getServerName()
+ ":" + request.getServerPort() + "/upload/" + filename;
String [] str = {url};
WangEditor we = new WangEditor(str);
return we;
} catch (IOException e) {
log.error("上傳文件失敗", e);
}
return null;
}
效果如下所示：
就是這么的簡單方便，三分鍾即可上手使用，在眾多的富文本編輯器中，尤其是帶圖片上傳的需求，這款真是當之無愧的存在，簡單輕便soeasy。
注：
關注「編程微刊」公眾號 ，在微信后台回復「領取資源」，獲取IT資源300G干貨大全。公眾號回復“1”，拉你進程序員技術討論群。
