使用富文本编辑器wangEditor完成图片文件的上传

项目中一些特定的功能可能需要在页面中用到富文本编辑器来实现文件的输入上传等等，在这里用wangEditor来实现使用富文本编辑器进行文件图面的输入和上传保存，这里wangEditor也可以参考wangEditor使用文档

1.引入相关的wangEditor.js和jquery文件：

<head>
<script type="text/javascript" src="/static/js/jquery-3.3.1.js"></script>
<script type="text/javascript" src="/static/js/wangEditor.js"></script>
</head>

2.在jsp页面创建富文本编辑器：

使用一个div标签来代表编辑器输入框，在script中给这个div输入框添加编辑器模型
提交编辑的内容需要使用textarea标签，它是将输入内容转换成html代码然后提交，form包裹起来
script中先创建一个wangEditor对象，在最后用 editor.create()进行编辑器内容添加
div是无法提交数据的，如果要提交输入的内容还需要把div中的数据同步到textarea标签中，使用onchange事件实现同步更新到 textarea

<body>
	<form action="EditorResult.jsp" method="post">
		<!-- 添加一个div用来显示富文本编辑器 -->
		<div id="editor"> <p>欢迎使用 <b>wangEditor</b> 富文本编辑器</p> </div>
	    <textarea name="editorval" id="text1" style="display: none"></textarea>
	    <button type="submit">提交</button>
    </form>
    <!-- 注意， 只需要引用 JS，无需引用任何 CSS ！！！-->
    <script type="text/javascript">
        var E = window.wangEditor	/* 创建一个对象 */
        var editor = new E('#editor')
        // 上传图片到服务器,后面加上图片地址
        editor.customConfig.uploadImgServer = '/upload' 
        //自定义name,接收的时候图片文件的那么用这个
        editor.customConfig.uploadFileName = 'upimg'
        var $text1 = $("#text1");
        /* 添加onchange事件实现textarea提交 */
        editor.customConfig.onchange = function (html) {
       		 // 监控变化，同步更新到 textarea
       		 $text1.val(html)
        }
        editor.create()
    </script>
</body>

3.可以将form提交地址中输出编辑器的内容，通过<textarea 标签的name 属性来获取：

<body>
	<% String val = request.getParameter("editorval");
		out.print("当前富文本编辑器的内容：<br>");
		out.print(val); %>
</body>

富文本编辑器样式：
在这里插入图片描述
接收编辑器内容并输出

4.使用富文本编辑器实现本地图片的上传：

4.1：编辑器里可以上传本地图片也可以上传网络图片，网络图片只需要给到网络图片的链接地址编辑器会自己去引用并显示
4.2：要实现本地图片的上传，需要在script中添加两条定义语句，分别是：配置服务器端地址就是选择图片上传后要访问的controller层的访问地址，还有一个是controller层方法中接收图片的参数名称：

		// 上传图片到服务器,对应的是controller层的@RequestMapping("/upload")
        editor.customConfig.uploadImgServer = '/upload' 
        //自定义name,接收的时候图片文件的那么用这个，对应的是参数中的MultipartFile upimg名称
        editor.customConfig.uploadFileName = 'upimg'

4.3：在web-app文件夹下新建一个文件夹用来存放图片信息：
在这里插入图片描述

5.在controller层新建一个文件夹用来执行图片的存储操作：

5.1：参数包括从js中获取的自定义的图片名称 MultipartFile upimg
5.2：先获取存放图片的文件夹的地址名称和生成一段随机的字符串用来代表存放图片的名称
5.3：截取传来的文件的后缀名
5.4：图片保存用upimg.transferTo()方法，upimg是传来的参数名称保存的时候生成新的文件名称
5.5：工具类对象中存入异常状态和图片的地址等信息最后返回工具类对象

图片上传到服务器
@Controller
public class UploadController {
	@RequestMapping("/upload")
	@ResponseBody
	public EditorResult upload(MultipartFile upimg,HttpServletRequest request){
		//工具类对象
		EditorResult er = new EditorResult();
		er.setErrno(1);
		//获取文件地址
		String basepath = request.getServletContext().getRealPath("/uploadimg");
		String imgname = UUID.randomUUID().toString();
		//文件后缀名
		String suffix = upimg.getOriginalFilename().substring(upimg.getOriginalFilename().lastIndexOf("."));
		//文件保存
		try {
			upimg.transferTo(new File(basepath+"/"+imgname+suffix));
			//上传成功修改errno错误状态,返回路径
			er.setErrno(0);
			er.setData(new String[]{"/uploadimg/"+imgname+suffix});
		} catch (IllegalStateException e) {
			e.printStackTrace();
		} catch (IOException e) {
			e.printStackTrace();
		}
		//返回类型是固定的，这里需要一个工具类
		return er;
	}
}

5.6：上述方法中还用到的一个工具类，因为使用编辑器上传文件要求返回的内容是固定的errno错误代码和data数组存的是图片的线上地址：

public class EditorResult {
	private int errno;
	private String[] data;
	这里需要get和set方法
}

6.最后在springmvc中配置上传文件所需要的bean

<!-- 配置bean来帮助实现上传文件操作 -->
	<bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
	</bean>