wangEditor基於javascript和css開發的 Web富文字編輯器， 輕量、簡潔、易用、開源免費

效果展示：

一：引入js

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

二：定義dom容器

<div id="div1" class="toolbar"></div>
<div style="padding: 5px 0; color: #ccc"></div>
<div id="div2" class="text">
	<p>請在此輸入內容</p>
</div>
 

三：定義樣式

.toolbar {
	border: 1px solid #ccc;
	width: 800px;
}

.text {
	border: 1px solid #ccc;
	height: 400px;
	width: 800px;
}

四：js程式碼

    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()
 

五：伺服器程式碼

匯入依賴：

<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;

	}