為什么需要富文本編輯器
RTE目的是提供給不會(huì)寫(xiě)HTML代碼的用戶，編輯出類(lèi)似WORD格式的WEB文檔纺涤。
主要應(yīng)用場(chǎng)景：郵件編寫(xiě)译暂、論壇灌水、電商商品管理撩炊、新聞消息模塊
常見(jiàn)的富文本編輯器
百度的UEditor外永、kindEditor、TinyMCE衰抑、ckeditor象迎、王福朋的wangEditor
wangEditor的介紹
wangEditor于2014年11月推出荧嵌，是基于bootstrap的一款富文本編輯器
wangEditor的定位是做最簡(jiǎn)單呛踊、易用、快捷啦撮、輕量化的富文本編輯器谭网。
wangEditor(僅支持 IE10+ 的瀏覽器)
官網(wǎng)：www.wangEditor.com
文檔：www.kancloud.cn/wangfupeng/wangeditor3/332599
源碼：github.com/wangfupeng1988/wangEditor
Spring MVC整合wangEditor
POM.xml
<!-- 文件上傳與下載 -->
<dependency>
<groupId>commons-fileupload</groupId>
<artifactId>commons-fileupload</artifactId>
<version>1.3.3</version>
</dependency>
spring-mvc.xml
<mvc:resources mapping="/upload/**" location="/upload/" cache-period="31536000"/>
<!-- SpringMVC上傳文件時(shí)，需要配置MultipartResolver處理器 -->
<bean id="multipartResolver"
class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
<!-- 上傳文件大小上限赃春，單位為字節(jié)（10MB） -->
<property name="maxUploadSize">
<value>10485760</value>
</property>
<!-- 請(qǐng)求的編碼格式愉择，必須和jSP的pageEncoding屬性一致，以便正確讀取表單的內(nèi)容，默認(rèn)為ISO-8859-1 -->
<property name="defaultEncoding">
<value>UTF-8</value>
</property>
</bean>
pojo
public class WangEditor {
private Integer errno; //錯(cuò)誤代碼, 0標(biāo)識(shí)沒(méi)有錯(cuò)誤
private String[] data; //已上傳到圖片路徑
}
Controller
@Controller
@RequestMapping(value="/upload")
public class UploadController{
@ResponseBody
@RequestMapping(value="wang")
public WangEditor uploadFile(
@RequestParam("myFile") MultipartFile multipartFile,
HttpServletRequest request) {
try {
// 獲取服務(wù)器真實(shí)路徑
String realPath = request.getSession().getServletContext().getRealPath("");
InputStream inputStream = multipartFile.getInputStream();
String contextPath = request.getContextPath();
// 服務(wù)器根目錄的路徑
String path = null;
if(contextPath.length()>0) {
path = realPath.replace(contextPath.substring(1), "");
}else{
path = realPath;
}
// 根目錄下新建文件夾upload锥涕，存放上傳圖片
String uploadPath = path + "upload";
/* 獲取上傳文件的后綴 */
String suffix = multipartFile.getOriginalFilename().substring (multipartFile.getOriginalFilename().lastIndexOf("."));
/* 保存文件名稱(chēng) */
String filename = UUID.randomUUID().toString()+ suffix;
// 將文件上傳的服務(wù)器根目錄下的upload文件夾
File file = new File(uploadPath, filename);
FileUtils.copyInputStreamToFile(inputStream, file);
// 返回圖片訪問(wèn)路徑
String url = request.getScheme() + "://" + request.getServerName()
+ ":" + request.getServerPort() + "/upload/" + filename;
String[] strs = {url};
WangEditor we = new WangEditor();
we.setErrno(new Integer(0));
we.setData(strs);
return we;
} catch (IOException e) {
//log.error("上傳文件失敗", e);
e.printStackTrace();
}
return null;
}
HTML頁(yè)面
<!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>請(qǐng)?jiān)诖溯斎雰?nèi)容</p>
</div>
</body>
<script src="http://code.jquery.com/jquery-1.8.0.min.js"></script>
<script type="text/javascript" src="plugins/wangeditor/wangEditor.min.js"></script>
<script>
var E = window.wangEditor
var editor = new E('#div1', '#div2') // 兩個(gè)參數(shù)也可以傳入 elem 對(duì)象衷戈，class 選擇器
//開(kāi)啟debug模式
editor.customConfig.debug = true;
// 關(guān)閉粘貼內(nèi)容中的樣式
editor.customConfig.pasteFilterStyle = false
// 忽略粘貼內(nèi)容中的圖片
editor.customConfig.pasteIgnoreImg = true
// 使用 base64 保存圖片
//editor.customConfig.uploadImgShowBase64 = true
// 上傳圖片到服務(wù)器
editor.customConfig.uploadFileName = 'myFile'; //設(shè)置文件上傳的參數(shù)名稱(chēng)
editor.customConfig.uploadImgServer = '/upload/wang'; //設(shè)置上傳文件的服務(wù)器路徑
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("上傳出錯(cuò)");
},
timeout: function(xhr, editor) {
console.log("上傳超時(shí)");
}
}
editor.create()
</script>
<br/>
<button id="editorGetBtn">獲取內(nèi)容</button>
<script>
$("#editorGetBtn").click(function(){
//獲取編輯器的內(nèi)容，帶樣式
//一般使用這個(gè)獲取數(shù)據(jù)层坠，通過(guò)ajax發(fā)送給服務(wù)端 殖妇，然后服務(wù)端以Ｓtring接收，保存到數(shù)據(jù)庫(kù)．
alert(editor.txt.html());
});
</script>
</html>
