Java-SSM-百度-UEditor-上传图片

最近，公司项目中需要增加新闻模块。采用了百度的UEditor 来实现对新闻的排版，没有细研究，只是用了他的文本编辑和上传图片的功能。

一：文件配置

1.百度UEditor官网：http://ueditor.baidu.com/website/download.html

2.下载：

3.导入到项目中：解压 ueditor1_4_3_2-utf8-jsp （**我项目中该文件改名为ueditor）

二：项目代码

简单的来说一下，前端和后台的代码：

1. jsp页面：

1.1  引入js：

<!-- 配置文件 -->  
<script type="text/javascript" src="/ueditor/ueditor.config.js"></script> 
<!-- 编辑器源码文件 -->  
<script type="text/javascript" src="/ueditor/ueditor.all.js"></script>
<!-- 语言包文件(建议手动加载语言包，避免在ie下，因为加载语言失败导致编辑器加载失败) -->  
<script type="text/javascript" src="/ueditor/lang/zh-cn/zh-cn.js"></script>

1.2 jsp 文本框：

<div id="editor" style="width:794px;height:340px;"></div> 

1.3 js：

$(function() {
	var ue = UE.getEditor('editor'); 
	UE.Editor.prototype._bkGetActionUrl = UE.Editor.prototype.getActionUrl;    
	UE.Editor.prototype.getActionUrl = function(action) {    
		if (action == 'uploadimage' || action == 'uploadscrawl' || action == 'uploadvideo') {    
	        	return 'http://localhost:8005/admin/upload/upPicNews'; //调用后台接口上传图片   
		} else {    
	        	return this._bkGetActionUrl.call(this, action);    
		}    
	}       
});	
//取文本框中的内容（纯文本内容和脚本内容）
var ue = UE.getEditor('editor'); //新闻内容
var contentScript = ue.getContent();//获取html内容，返回: <p>hello</p>

if(contentScript != null && contentScript != ""){
    contentScript = contentScript.replace(/\"/g,"'");//把脚本中的所有双引号 替换为单引号
}
//取文本框中的内容（纯文本内容和脚本内容）
var ue = UE.getEditor('editor'); //新闻内容
    
//获取纯文本内容，返回: hello
var content = ue.getContentTxt();

1.4 修改ueditor/ueditor.config.js 文件：

//为编辑器实例添加一个路径，这个不能被注释
UEDITOR_HOME_URL: URL

// 服务器统一请求接口路径
, serverUrl: URL + "jsp/controller.jsp"

1.5 修改ueditor/config.json

因为我是直接调用后台的上传文件的接口，所以 imageUrlPrefix 和 imagePathFormat 没有配置 

/* 上传图片配置项 */
"imageActionName": "uploadimage", /* 执行上传图片的action名称 */
"imageFieldName": "upfile", /* 提交的图片表单名称 */
"imageMaxSize": 2048000, /* 上传大小限制，单位B */
"imageAllowFiles": [".png", ".jpg", ".jpeg", ".gif", ".bmp"], /* 上传图片格式显示 */
"imageCompressEnable": true, /* 是否压缩图片,默认是true */
"imageCompressBorder": 1600, /* 图片压缩最长边限制 */
"imageInsertAlign": "none", /* 插入的图片浮动方式 */
"imageUrlPrefix": "", /* 图片访问路径前缀  */
"imagePathFormat": "", /* 上传保存路径,可以自定义保存路径和文件名格式*/
/* {filename} 会替换成原文件名,配置这项需要注意中文乱码问题 */
/* {rand:6} 会替换成随机数,后面的数字是随机数的位数 */
/* {time} 会替换成时间戳 */
/* {yyyy} 会替换成四位年份 */
/* {yy} 会替换成两位年份 */
/* {mm} 会替换成两位月份 *
/* {dd} 会替换成两位日期 */
/* {hh} 会替换成两位小时 *
 /* {ii} 会替换成两位分钟 */
/* {ss} 会替换成两位秒 */
/* 非法字符 \ : * ? " < > | */
/* 具请体看线上文档: fex.baidu.com/ueditor/#use-format_upload_filename */

2. 后台接口:

2.1 maven项目中引 jar包：（两种方式）

<!--  将ueditor/jsp/lib 移动到 WEB-INF，然后在pom.xml中引入 -->
<dependency>
	<groupId>com.baidu</groupId>
        <artifactId>ueditor</artifactId>
        <version>1.0</version>
        <scope>system</scope>
	<systemPath>${pom.basedir}/src/main/webapp/WEB-INF/lib/ueditor-1.1.2.jar</systemPath>
</dependency>
<dependency>
	<groupId>commons-codec</groupId>
	<artifactId>commons-codec</artifactId>
	<version>1.9</version>
</dependency>
		
<dependency>
	<groupId>commons-io</groupId>
	<artifactId>commons-io</artifactId>
	<version>2.4</version>
</dependency>
<dependency>
	<groupId>commons-fileupload</groupId>
	<artifactId>commons-fileupload</artifactId>
	<version>1.3.1</version>
</dependency>

<dependency>
	<groupId>org.json</groupId>
	<artifactId>json</artifactId>
	<version>20160810</version>
</dependency>

2.2 controller：（Map为需要返回的参数）

@RequestMapping(value="/upPicNews",method = RequestMethod.POST)  
@ResponseBody  
public Map<String,String> uploadImage(@RequestParam(value = "upfile", required = false)  CommonsMultipartFile upfile,HttpServletRequest request) throws Exception{   
	String path = PIC_HOST_REAL_PATH + File.separator + PIC_NEWS_PATH; // 获取本地原图存储路径 
  
        File f = new File(path);  
        if (!f.exists()) {  
            	f.mkdirs();  
        }  
      
       	FileItem item = upfile.getFileItem();  
        //文件路径  
        String pathFileName = item.getName();  
        //字节数  
        long l = item.getSize();  
        String fileSize = Long.toString(l);  
        //文件名  
        int start = pathFileName.lastIndexOf("\\");  
        String fileName = pathFileName.substring(start + 1);  
        //后缀 .jpg  
        int indexName = fileName.lastIndexOf('.');  
        String subName = fileName.substring(indexName);  
        //新文件名  
        String nowName = new SimpleDateFormat("yyMMddHHmmss").format(new Date()) +"_"+ fileName;  
              
        if (upfile.getSize() > 0) {						
        	upfile.transferTo(new File(path+ File.separator + nowName));//上传图片	
	}	
          
        String strBackUrl = PIC_URL + "news/pic/"; //服务器地址+端口号+项目名称 +详细路径
          
        Map<String,String> map = new HashMap<String,String >();  
         
        map.put("title", fileName); //文件原名称 
 
        map.put("original", nowName); //文件名称 
           
        map.put("size", fileSize);  //文件大小（字节数）
        
        map.put("state", "SUCCESS"); //是否上传成功 
         
        map.put("type", subName); //文件类型 .+后缀名 
         
        map.put("url",  strBackUrl + nowName); //文件路径 

        return map;  
          
 }