首页手记 wangEditor -...

wangEditor - 轻量级web富文本编辑器（可带图片上传）

标签：

JavaScript

#####业务需求：

通过后台编辑文章和图片，上传到前端界面，展示新闻消息模块。这个时候，需要一款简洁的编辑器，百度编辑器是最常用的一种，但是功能太过于复杂，而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 class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="http://code.jquery.com/jquery-1.8.0.min.js"></script>
	<script type="text/javascript" class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="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。