1.? ? 什么是wangeditor
(一個(gè)富文本編輯器)
2.? ? ?什么是富文本編輯器
(不止包含文字，還包含圖片套像、表情终息、字體、表格柳譬、超鏈接续镇、音頻、視頻等內(nèi)容的文本編輯器)摸航。
3.? ? ?為什么要用富文本編輯器
使內(nèi)容更加豐富多彩。
4.? ? 使用場(chǎng)景：
一切想要使內(nèi)容豐富起來(lái)的內(nèi)容輸入框雨膨，都可以使用富文本編輯器读串。
5.? ? ?什么地方使用了富文本編輯器
：論壇撒妈、博客排监、OA、新聞網(wǎng)站
6.? ? 引入資源(css/js)
7.? ? 新建頁(yè)面wangeditordemo.html
8.? ? ?頁(yè)面添加引入樣式和腳本
<link rel="stylesheet" href="plugins/wangeditor/min/wangEditor.min.css"/>
<script src="plugins/wangeditor/min/wangEditor.min.js"></script>
<script src="jquery/jquery-2.1.1.min.js"></script>
9.添加頁(yè)面元素
<div id="editor"></div>
<input type="button" id="test1" value="拿html"/>
<input type="button" id="test2" value="拿text"/>
10.添加腳本
? ? ? ? var E = window.wangEditor;
? ? ? ? var editor =new E("#myEditor");
? ? ? ? //開(kāi)啟debug模式
? ? ? ? editor.customConfig.debug =true;
? ? ? ? // 關(guān)閉粘貼內(nèi)容中的樣式
? ? ? ? editor.customConfig.pasteFilterStyle =false;
? ? ? ? // 忽略粘貼內(nèi)容中的圖片
? ? ? ? editor.customConfig.pasteIgnoreImg =false;
? ? ? ? // 使用 base64 保存圖片
? ? ? ? //editor.customConfig.uploadImgShowBase64 = true
? ? ? ? // 上傳圖片到服務(wù)器
? ? ? ? editor.customConfig.uploadFileName ='editorFile'; //設(shè)置文件上傳的參數(shù)名稱(chēng)
? ? ? ? editor.customConfig.uploadImgServer ='upload1'; //設(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();
? ? ? ? $("#btnGetHtml").bind("click",function(){
//? ? ? ? ? ? alert("hello world");
? ? ? ? ? ? var content = editor.txt.html();
? ? ? ? ? ? alert(content);
? ? ? ? });
? ? </script>
11.在controller中添加如下方法
static StringUPLOAD_PATH ="/static/upload/";
@ResponseBody
@RequestMapping(value ="upload1", method = RequestMethod.POST)
public Mapupload1(MultipartFile editorFile, HttpServletRequest request) {
System.out.println("inner upload1");
? ? Map result =new HashMap();
? ? // 獲取文件后綴
? ? String fileName = editorFile.getOriginalFilename();
? ? String fileSuffix = fileName.substring(fileName.lastIndexOf("."));
? ? // 文件存放路徑
? ? String filePath = request.getSession().getServletContext().getRealPath(UPLOAD_PATH);
? ? //網(wǎng)絡(luò)地址類(lèi)
? ? InetAddress ia=null;
? ? try {
//獲取本機(jī)網(wǎng)絡(luò)地址
? ? ? ? ia = ia.getLocalHost();
? ? ? ? System.out.println(ia.getHostAddress());
? ? }catch (UnknownHostException e) {
e.printStackTrace();
? ? }
// 判斷路徑是否存在，不存在則創(chuàng)建文件夾
? ? File file =new File(filePath);
? ? if (!file.exists()) {
file.mkdirs();
? ? }
// 將文件寫(xiě)入目標(biāo)
? ? file =new File(filePath, UUID.randomUUID() + fileSuffix);
? ? try {
editorFile.transferTo(file);
? ? }catch (IOException e) {
e.printStackTrace();
? ? }
// 獲取服務(wù)端路徑（拼接圖片上傳以后的網(wǎng)絡(luò)訪問(wèn)地址）
? ? String serverPath = String.format("%s://%s:%s%s%s", request.getScheme(), ia.getHostAddress(), request.getServerPort(), request.getContextPath(), UPLOAD_PATH);
? ? System.out.println(serverPath);
? ? // 返回給 wangEditor 的數(shù)據(jù)格式
? ? result.put("errno", 0);
? ? result.put("data", new String[]{serverPath + file.getName()});
? ? return result;
}
效果圖
