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
//图片存储的基本路径 ,我的拼接出来是这样的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
//---------------------------------------------------------------------------------------------------------
//获取后缀名方法,大家随便写了调用即可 ;
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
来源: http://www.cnblogs.com/jungege/p/6742321.html