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;

}