WangEditor富文本编辑器（图片上传）

wangEditor基于javascript和css开发的 Web富文本编辑器， 轻量、简洁、易用、开源免费

 

开发文档、demo、下载地址：http://www.wangeditor.com/

 

效果展示：

一：引入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>

 Springmvc配置文件中添加文件上传解析器：

<!-- springmvc文件上传解析器 -->
<bean id="multipartResolver"
	class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
	<property name="defaultEncoding" value="UTF-8" />
	<property name="maxUploadSize" value="-1" />
</bean>

 

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

import java.io.File;
import java.io.IOException;
import java.io.InputStream;
import java.text.SimpleDateFormat;
import java.util.Date;
import javax.servlet.http.HttpServletRequest;
import org.apache.commons.io.FileUtils;
import org.apache.commons.lang3.RandomStringUtils;
import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.multipart.MultipartFile;
import com.mote.pojo.WangEditor;

public class EditorController {

	private Logger log = LoggerFactory.getLogger(getClass());

	// 图片上传
	@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 = 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;

	}

	public String getFileName() {
		SimpleDateFormat sdf = new SimpleDateFormat("yyyyMMddHHmmss");
		String timeStr = sdf.format(new Date());
		String str = RandomStringUtils.random(5,
				"abcdefghijklmnopqrstuvwxyz1234567890");
		String name = timeStr + str + ".jpg";
		return name;
	}

}