UEditor使用------图片上传与springMVC集成 完整实例

UEditor是一个很强大的在线编辑软件 ,首先讲一下 基本的配置使用 ,如果已经会的同学可以直接跳过此节 ,今天篇文章重点说图片上传;

一  富文本的初始化使用:

1 首先将UEditor从官网下载下来放进webinf下面

2 然后在需要用到的jsp里面导入相应的文件 ,请严格按照顺序导入;

3 在要显示编辑器的地方写上以下代码 ,其中 style里面的内容自己定义;

4 在jsp页面的最下面的</html>之前写一段js代码 ,首先写工具栏的配置;,且记一定要在下面 这样才能兼容IE8 ,并保证在所有浏览器都没问题,

工具栏的全部配置都在/ueditor/ueditor.config.js 这个文件中 , 上面写的好好的备注 , 另外这是百度上的 我收藏的可以看看: http://fex.baidu.com/ueditor/#server-path

5 之后在下面就可以初始化了, 红框框里面的内容 就是 上面标签中定义的id ;

到此位置 ,访问此jsp页面即可看到初始化好的 富文本编辑器 , 基本功能都是可以用的;

二 图片上传功能的实现 [ 与springSVC集成 ]　

1之前初始化好的 编辑器不能上传图片,单图上传的按钮是灰色的 无法点击;

我这里配置好了,所以不是暗的,下面教大家一步一步配置,大家一定要主要我说的代码放置的顺序 ;

2 在jsp文件的最上面定义 UEditor的基础路径 见红框框里面的内容;

放在最上面的原因是 ,下面加js文件的时候是需要用到这些配置的  ;

3 打开 配置文件 /ueditor/ueditor.config.js ; 在此文件中找到 :

 请保证这一句未被注销 ; 此时单图上传的图标可能还没有亮 ,或者亮了但是点击一下就变按了 ,原因是需要的jar包没有 , 我们从官网下载的java UTF-8的版本里面有 5个jar包 ;

请注意jar包的版本,在后面 写 meven依赖是有用的 ,若版本错了,可能导致不兼容,或者方法无效等问题;

4 大家可以直接导入jar包进去 , 但是推荐大家用meven中的pom依赖加载 ,我复制出来方便大家粘贴:

<dependency>
<groupId>org.json</groupId>
<artifactId>org.json</artifactId>
<version>2.0</version>
</dependency>
<dependency>
<groupId>com.baidu.ueditor</groupId>
<artifactId>ueditor</artifactId>
<version>1.1.2</version>
</dependency>

<dependency>
<groupId>cglib</groupId>
<artifactId>cglib</artifactId>
<version>2.2.2</version>
</dependency>

<dependency>
<groupId>commons-fileupload</groupId>
<artifactId>commons-fileupload</artifactId>
<version>1.3.1</version>
</dependency>
<dependency>
<groupId>commons-io</groupId>
<artifactId>commons-io</artifactId>
<version>2.4</version>
</dependency>
<dependency>
<groupId>commons-codec</groupId>
<artifactId>commons-codec</artifactId>
<version>1.9</version>
</dependency>
<dependency>
<groupId>commons-dbcp</groupId>
<artifactId>commons-dbcp</artifactId>
<version>1.2.2</version>
</dependency>

此时需要重新部署项目发布, 在看看, 点击单图上传按钮, 应该可以弹出文件选择框了 ;

5 现在需要自定义 图片上传的action类, 并修改/ueditor/jsp/config.json 文件的配置;

aciton定义的方法如下 : [我的工程里面的此action 的访问路径是:/upload/addUEImage.json]

//--------------------------------------------------------------------------------------------------------

/**
* 富文本图片保存
*
* */
@ResponseBody
@RequestMapping(value = "addUEImage.json",method = RequestMethod.POST)
public void addUEImage(MultipartFile upfile, HttpServletRequest request, HttpServletResponse response){
response.setContentType("text/html");
//Map<String, Object> params = new HashMap<String, Object>();
String result = "" ;
try{

//图片存储的基本路径 ,我的拼接出来是这样的D:/Storage//UEImage
String basePath = ConfigUtil.getProperty("kms.storage.path")+""+ConfigUtil.getProperty("UEImage.url");

//visitUrl 是返回到页面上显示的路径 ,你的其他图片是怎么访问到的 ,这里就如何拼接 , 
String visitUrl = this.getFullPathForUEImage(request);

//获取文件的后缀 ,用于拼接 , 此方法 我会在后面贴出来的
String ext = UploadFileUtil.getExt(upfile.getOriginalFilename());

//自定义文件名称
String fileName = KMSUtil.randomUUID()+"."+ext;

//拼接保存路径 ,并保存文件 ;

StringBuilder sb = new StringBuilder(); 
sb.append(basePath).append("/").append(fileName);
visitUrl = visitUrl.concat(fileName);
File f = new File(sb.toString());
if(!f.exists()){
f.getParentFile().mkdirs();
}
OutputStream out = new FileOutputStream(f);
FileCopyUtils.copy(upfile.getInputStream(), out);

//返回需要的信息 ,这个方法本来是返回Map<string ,object> 的 但是在ie下面 图片会变成保存一个json文件 , 所以改成这中方式 , 参见此这个文章的所有蓝色部分
result = "{\"state\":\"SUCCESS\",\"url\":\""+visitUrl+"\",\"size\":\""+upfile.getSize()+
"\",\"original\":\""+fileName+"\",\"type\":\""+upfile.getContentType()+"\",}";
/*
params.put("state", "SUCCESS");
params.put("url", visitUrl);
params.put("size", upfile.getSize());
params.put("original", fileName);
params.put("type", upfile.getContentType());
*/
} catch (Exception e){
result = "{\"state\":\"图片上传失败!\",\"url\":\"\",\"size\":\"\",\"original\":\"\",\"type\":\"\",}";
/**params.put("state", "ERROR"); */
}


try {
response.getWriter().print(result);
} catch (IOException e) {
e.printStackTrace();
}

//return params;
}

//---------------------------------------------------------------------------------------------------------

//获取后缀名方法,大家随便写了调用即可 ;

public static String getExt(String name){
if(name == null || "".equals(name) || !name.contains("."))
return "";
return name.substring(name.lastIndexOf(".")+1);
}

6  action编写完成,返回的url里面的路径就是你加载完图片之后 ,显示在img标签的src值,请确保 ,此路径可以访问 , 我的比较复杂 ,这里不展示了

7  现在配置config.json文件 ,只需要修改一行即可 ;把imageActionName 修改成自己的刚才那个action的访问路径

　　请保证,此路径没有访问限制

8 在调用编辑器里面的jsp里面的初始化UEditor之后 , 需要重构下 调用action 的属性 ;

这是代码 ,免的大家需要一行一行的敲: basepath 是 htttp:// 127.0.0.1:8080/kms  类似的工程访问路径 ,红色的即是我们的action路径 ;

UE.Editor.prototype._bkGetActionUrl = UE.Editor.prototype.getActionUrl;
UE.Editor.prototype.getActionUrl = function(action){
if(action == "/upload/addUEImage.json"){
return basePath+"/upload/addUEImage.json";
}else{
return this._bkGetActionUrl.call(this, action);
}
}

好了 到此位置 ,图片就可以上传并保存了 , 如果的你的显示路径没问题 ,那么也是可以显示的 ,

当然 ,还有其他种类的集成方式,这里不介绍了 ,大家可以参考下面两个大侠的文章 ,希望对大家有所帮助

http://www.cnblogs.com/mumuxinfei/p/5363909.html;

http://blog.csdn.net/l1028386804/article/details/52389722 ;

有任何疑问 , 请与我交流哈:QQ1185931622 ,验证信息:UEditor交流HJ