wangEditor富文本編輯器使用及圖片上傳

引入js文件

<script type="text/javascript" src="style/js/wangEditor.min.js"></script>

新建div名字任意

<div id="editor">
</div>

　建立富文本編輯器

var E = window.wangEditor;
var editor = new E('#editor');
editor.customConfig.uploadImgServer = '<%=path%>/Img/upload'; //上傳URL
editor.customConfig.uploadImgMaxSize = 3 * 1024 * 1024;
editor.customConfig.uploadImgMaxLength = 5;		
editor.customConfig.uploadFileName = 'myFileName';
editor.customConfig.uploadImgHooks = {
    customInsert: function (insertImg, result, editor) {
		        // 圖片上傳並返回結果，自定義插入圖片的事件（而不是編輯器自動插入圖片！！！）
		        // insertImg 是插入圖片的函數，editor 是編輯器對象，result 是服務器端返回的結果
		
		        // 舉例：假如上傳圖片成功後，服務器端返回的是 {url:'....'} 這種格式，便可這樣插入圖片：
		        var url =result.data;
		        insertImg(url);
		
		        // result 必須是一個 JSON 格式字符串！！！不然報錯
		    }
	    }
        editor.create();

　後臺代碼 smm框架

public class ImgController {
	@Autowired  
    private HttpServletRequest request;  
	@RequestMapping(value ="/upload",method=RequestMethod.POST)
	@ResponseBody
	public Object UpLoadImg(@RequestParam(value="myFileName")MultipartFile mf) {
		String realPath = request.getSession().getServletContext().getRealPath("upload"); 
		
	//獲取源文件
	String filename = mf.getOriginalFilename();
	String[] names=filename.split("\\.");//
	String tempNum=(int)(Math.random()*100000)+"";
	String uploadFileName=tempNum +System.currentTimeMillis()+"."+names[names.length-1];
	File targetFile = new File (realPath,uploadFileName);//目標文件
	
	//開始從源文件拷貝到目標文件
	
	//傳圖片一步到位
	try {
		mf.transferTo(targetFile);
	} catch (IllegalStateException e) {
		// TODO Auto-generated catch block
		e.printStackTrace();
	} catch (IOException e) {
		// TODO Auto-generated catch block
		e.printStackTrace();
	}
	
	Map<String, String> map = new HashMap<String, String>();
	map.put("data","http://localhost:8080/SSM/upload/"+uploadFileName);//這裏應該是項目路徑
	return map;//將圖片地址返回
	}
}