百度Ueditor实现及文件上传

1.资源下载引入
		下载百度Ueditor1.4.3.3版本
2.页面引入JS文件
		<script type="text/javascript" charset="utf-8" src="/res/ueditor1.4.3.3/ueditor.config.js"></script>
		<script type="text/javascript" charset="utf-8" src="/res/ueditor1.4.3.3/ueditor.all.js"></script>
		<script type="text/javascript" charset="utf-8" src="/res/ueditor1.4.3.3/lang/zh-cn/zh-cn.js"></script>
3.页面实现
<script type="text/javascript" charset="utf-8" >
$(function(){
	Ueditor();//编辑器加载
	initUeditor();//编辑器初始化，文件上传	
});

var introductionUE=null;
function Ueditor(){
	UE.delEditor('introduction');
	introductionUE = UE.getEditor('introduction',{
		toolbars: [['fullscreen', 'source','|', 'undo', 'redo',
	        '|','bold', 'italic', 'underline', 'fontborder', 'strikethrough', 'superscript', 	
		'subscript', 'removeformat', 'formatmatch', 
	        'autotypeset', 'blockquote', 'pasteplain', '|', 'forecolor', 'backcolor', 
            'insertorderedlist', 'insertunorderedlist',
	         '|', 'rowspacingtop', 'rowspacingbottom', 'lineheight',
	   	'|', 'indent', 'justifyleft', 'justifycenter', 'justifyright', 'justifyjustify', '|', 
                  'touppercase', 'tolowercase',
	   	'|', 'inserttable', 'deletetable', 'insertparagraphbeforetable', 
                 'insertrow', 'deleterow', 'insertcol', 'deletecol', 
	   	'mergecells','paragraph', 'fontfamily', 'fontsize', 
                  'insertcode','simpleupload','insertimage',
	          '|', 'link', 'unlink', 'anchor', 'horizontal', 
	   		'|', 'spechars', 'searchreplace', 'preview'
	   		]
	   		],	
		autoHeightEnabled: true,
    	 	autoFloatEnabled: true,
    		initialFrameHeight: 240,
    		maximumWords:65535
		});
}
</script>
4.文件上传
		4.1修改ueditor.config.js中的Ueditor源文件路径，因为上传时，需要调用Ueditor的页面，如下图：地址及为Ueditor的HOME路径
![在这里插入图片描述](https://img-blog.csdnimg.cn/20190128120051889.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4OTAyNjc3,size_16,color_FFFFFF,t_70)
		4.2 引入JAR包或者POM文件
				JAR包引入 ，如下图所示： 
				![在这里插入图片描述](https://img-blog.csdnimg.cn/20190128110407912.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4OTAyNjc3,size_16,color_FFFFFF,t_70)    
maven引入方式，如下：
     <dependency>
            <groupId>com.github.qiuxiaoj</groupId>
            <artifactId>ueditor</artifactId>
            <version>1.1.1</version>
        </dependency>
        <dependency>
            <groupId>org.json</groupId>
            <artifactId>json</artifactId>
            <version>20170516</version>
        </dependency>
4.3 JS上传配置
	如下代码是上传图片回调配置，红色所示，是具体上传实现，需要我们写代码去实现。
initUeditor = function(){	
	UE.Editor.prototype._bkGetActionUrl=UE.Editor.prototype.getActionUrl; 
       //是用来获取Action的
    UE.Editor.prototype.getActionUrl=function(action){
    	//var pathName = window.document.location.origin;
    	//这里面的if语句，就是用来设置自定义action的
    	if (action == 'uploadimage') {
    			return "/UEditorUploadImg.htm";    		
		}else{
            return this._bkGetActionUrl.call(this, action);
    	        }
    }; 
};
3.4 上传方法实现
绿色部分需要自己实现文件上传，案例代码为文件服务接口实现
@RequestMapping({ "/UEditorUploadImg.htm" })
public void uploadImage(HttpServletRequest request,HttpServletResponse response) throws IllegalStateException,IOException,Exception{
response.setContentType("text/html;charset=UTF-8");
	JSONObject jsonobj = new JSONObject();
	<!-- 上传开始-->
	<!--上传结束-->
		String URL = request.getScheme() + "://" + request.getServerName()
				+ ":" + request.getServerPort();
		jsonobj.put("state", "SUCCESS");
   		//图片查看地址返回
		jsonobj.put("url", URL + "/product/viewimage.htm?ftpid=" + newfileId);
		jsonobj.put("original", fileName);
		String result = jsonobj.toString();
		response.getWriter().write(result);
	}
3.5 查看图片方法实现
绿色部分需要自己实现文件上传，案例代码为文件服务接口实现
@RequestMapping("/viewimage.htm")
	public void viewimagesByfileid(HttpServletRequest request,
			HttpServletResponse response) throws IOException {
		String id = request.getParameter("ftpid");
		response.setContentType("image/gif");
		java.io.OutputStream osOut = response.getOutputStream();
		try {
			log.info("==============图片查看开始=============");
			
			log.info("==============图片查看结束=============");
			int readLength = 0;
			byte[] readUnit = new byte[1024 * 1024];
			while ((readLength = is.read(readUnit)) != -1) {
				osOut.write(readUnit, 0, readLength);
				osOut.flush();
			}
			is.close();
			osOut.close();
		} catch (Exception e) {
			e.printStackTrace();
		}
	}