关于富文本编辑器—UEditor(java版)的使用,以及如何将UEditor的文件/图片上传路径改成绝对路径
突然发现好久没写博客了,感觉变懒了,是要让自己养成经常写文章的习惯才行。既可以分享自己的所学,和所想,和大家一起讨论,发现自己的不足的问题。
大家可能经常会用到富文本编辑器,今天我要说的是ueditor的使用,这是一个简单易用的开源富文本编辑器。但是对于没有用过的同学而言还是需要稍微了解一下的。
可能有些人也知道,ueditor是百度的开源富文本编辑器,当然也有一些其他优秀的富文本编辑器,比如kindeditor,ckeditor之类的,大家可以对比一下使用,但是我今天主要是讲java版的ueditor。
大家可以通过 https://ueditor.baidu.com/website/download.html 选择自己想使用的版本下载。
首先介绍一下它的目录层级:
- dialogs: 弹出对话框对应的资源和js文件
- jsp或php或asp或net: 涉及到服务器端操作的后台文件
- lang: 编辑器国际化显示的文件
- themes: 样式图片和样式文件
- third-party: 第三方插件(包括代码高亮,源码编辑等组件)
- ueditor.all.js: 开发版代码合并的结果,目录下所有文件的打包文件
- ueditor.all.min.js: ueditor.all.js文件的压缩版,建议在正式部署时采用
- ueditor.config.js: 编辑器的配置文件,建议和编辑器实例化页面置于同一目录
- ueditor.parse.js: 编辑的内容显示页面引用,会自动加载表格、列表、代码高亮等样式
我们把ueditor拷贝到我们的项目路径下,与你的页面是在同一个目录下就可以了。
在需要用到ueditor的页面引入下面的文件即可,根据自己的实际路径引入:
<script type="text/javascript" charset="utf-8" src="../../ueditor/ueditor.config.js"></script>
<script type="text/javascript" charset="utf-8" src="../../ueditor/ueditor.all.min.js"></script>
<script type="text/javascript" src="../../ueditor/lang/zh-cn/zh-cn.js"></script>
在页面需要展示富文本编辑器的位置这样引入:
1 <!-- 加载编辑器的容器 --> 2 <div class="k-field" style="width:1024px;"> 3 <script id="article_content" name="article_content" type="text/plain" style="width:1024px;height:400px;"> 4 在这里输入您的内容...... 5 </script> 6 </div> 7 <!-- 实例化编辑器 --> 8 <script type="text/javascript"> 9 var ue = ue.geteditor('article_content',{ 10 <!-- 根据个人需要配置,不配置则按默认的 --> 11 maximumwords:50000, 12 enableautosave:true, 13 saveinterval:500 14 }); 15 </script>
除此之外我们还要引入ueditor所需要的jar包 在 ueditor目录下的 jsp/lib 下有,如果你有引入这些包的话,则无需引入。
如果你的不是maven项目的话,直接把所有包拷贝到项目下面的lib目录下就可以自动引入了,但是如果是maven项目的话,maven库里没有ueditor的包,那就不能按照平常的方式引入了,可以把ueditor的包拷贝到项目的lib目录下之后,在pom.xml中这样引入:
1 <dependency> 2 <groupid>com.baidu.ueditor</groupid> 3 <artifactid>ueditor</artifactid> 4 <version>1.1.2</version> 5 <scope>system</scope> 6 <systempath>${project.basedir}/src/main/webapp/web-inf/lib/ueditor-1.1.2.jar</systempath> 7 </dependency>
上面的步骤都完成之后就可以去对应的页面试一下效果如何。如果没有做任何改动的话就是下面的效果:
以上就完成了最简单的ueditor富文本编辑器引入方式,可以体验一下上传图片和文件,都可以正常上传。
但是当你重新部署项目之后会发现,怎么之前上传的文件和图片下载不了也看不到了呢。这就是因为ueditor原生上传文件和图片的方式是上传到项目路径下,那重新部署项目,那不就把原来上传的文件和图片覆盖了咯。
所以为了避免这样的情况发生,我们接下来稍微修改一下ueditor的代码。可能步骤有点多,但是耐心地跟着我的步骤一步步去理解,应该可以很快就知道怎么修改。
通过查看源码,下面我们一步步来追踪:
1. 上传图片或文件时最开始会进入“ueditor/jsp/controller.jsp”,我们查看其代码:
1 <%@ page language="java" contenttype="text/html; charset=utf-8" 2 import="com.baidu.ueditor.actionenter" 3 pageencoding="utf-8"%> 4 <%@ page trimdirectivewhitespaces="true" %> 5 <% 6 7 request.setcharacterencoding( "utf-8" ); 8 response.setheader("content-type" , "text/html"); 9 string rootpath = application.getrealpath( "/" ); 10 out.write( new actionenter( request, rootpath ).exec() ); 11 12 %>
第9行中的rootpath 是获取 项目的实际路径,并作为 actionenter 构造函数的参数之一实例化对象,在这个构造函数中(如下面的代码)会去初始化改类的成员变量以及通过“configmanager.getinstance”获取配置,
其实是获取 ueditor/jsp/config.json 的配置信息。大家可以去看一下里面配置了一些什么内容,里面也有注释,我这里粘贴图片的配置内容:
1 public actionenter(httpservletrequest request, string rootpath) { 2 this.request = request; 3 this.rootpath = rootpath; 4 this.actiontype = request.getparameter("action"); 5 this.contextpath = request.getcontextpath(); 6 this.configmanager = configmanager.getinstance(this.rootpath, this.contextpath, request.getrequesturi()); 7 }
1 /* 上传图片配置项 */ 2 "imageactionname": "uploadimage", /* 执行上传图片的action名称 */ 3 "imagefieldname": "upfile", /* 提交的图片表单名称 */ 4 "imagemaxsize": 2048000, /* 上传大小限制,单位b */ 5 "imageallowfiles": [".png", ".jpg", ".jpeg", ".gif", ".bmp"], /* 上传图片格式显示 */ 6 "imagecompressenable": true, /* 是否压缩图片,默认是true */ 7 "imagecompressborder": 1600, /* 图片压缩最长边限制 */ 8 "imageinsertalign": "none", /* 插入的图片浮动方式 */ 9 "imageurlprefix": "", /* 图片访问路径前缀 */ 10 "imagepathformat": "/ueditor/jsp/upload/image/{yyyy}{mm}{dd}/{time}{rand:6}", /* 上传保存路径,可以自定义保存路径和文件名格式 */ 11 /* {filename} 会替换成原文件名,配置这项需要注意中文乱码问题 */ 12 /* {rand:6} 会替换成随机数,后面的数字是随机数的位数 */ 13 /* {time} 会替换成时间戳 */ 14 /* {yyyy} 会替换成四位年份 */ 15 /* {yy} 会替换成两位年份 */ 16 /* {mm} 会替换成两位月份 */ 17 /* {dd} 会替换成两位日期 */ 18 /* {hh} 会替换成两位小时 */ 19 /* {ii} 会替换成两位分钟 */ 20 /* {ss} 会替换成两位秒 */ 21 /* 非法字符 \ : * ? " < > | */ 22 /* 具请体看线上文档: fex.baidu.com/ueditor/#use-format_upload_filename */
2. 总共也就几行代码,发现会调用 actionenter 类的 exec() 方法,我进入该方法:
1 public string exec() { 2 string callbackname = this.request.getparameter("callback"); 3 if (callbackname != null) { 4 return !this.validcallbackname(callbackname) ? (new basestate(false, 401)).tojsonstring() : callbackname + "(" + this.invoke() + ");"; 5 } else { 6 return this.invoke(); 7 } 8 }
3. 发现这个方法会调用 该类的 invoke() 方法,我们继续看invoke() 方法:
1 public string invoke() { 2 if (this.actiontype != null && actionmap.mapping.containskey(this.actiontype)) { 3 if (this.configmanager != null && this.configmanager.valid()) { 4 state state = null; 5 int actioncode = actionmap.gettype(this.actiontype); 6 map<string, object> conf = null; 7 switch(actioncode) { 8 case 0: 9 return this.configmanager.getallconfig().tostring(); 10 case 1: 11 case 2: 12 case 3: 13 case 4: 14 conf = this.configmanager.getconfig(actioncode); 15 state = (new uploader(this.request, conf)).doexec(); 16 break; 17 case 5: 18 conf = this.configmanager.getconfig(actioncode); 19 string[] list = this.request.getparametervalues((string)conf.get("fieldname")); 20 state = (new imagehunter(conf)).capture(list); 21 break; 22 case 6: 23 case 7: 24 conf = this.configmanager.getconfig(actioncode); 25 int start = this.getstartindex(); 26 state = (new filemanager(conf)).listfile(start); 27 } 28 29 return state.tojsonstring(); 30 } else { 31 return (new basestate(false, 102)).tojsonstring(); 32 } 33 } else { 34 return (new basestate(false, 101)).tojsonstring(); 35 } 36 }
在上面的这个方法中我们发现,在第7行代码中有一个switch,根据 “actioncode” 的值的不同做一些不同的事情,我们看一下这个值从哪里来的,发现这个值是 通过调用这 个 方法 而得到 “actionmap.gettype(this.actiontype)”,我们进去gettype方法会发现 只是返回一个map的velue值,这个value值就是上的 mapping 里的值,我们通过第1步的配置文件可以知道上传图片的是“uploadimage”
所以返回的value值是 1,而文件“uploadfile”返回的是4。我们再看到上面的switch 可以知道执行this.configmanager.getconfig 重新组装了配置信息并将配置信息作为参数实例化uploader ,并调用该实例 的 doexec()方法。
1 public final class actionmap { 2 public static final map<string, integer> mapping = new hashmap<string, integer>() { 3 { 4 this.put("config", integer.valueof(0)); 5 this.put("uploadimage", integer.valueof(1)); 6 this.put("uploadscrawl", integer.valueof(2)); 7 this.put("uploadvideo", integer.valueof(3)); 8 this.put("uploadfile", integer.valueof(4)); 9 this.put("catchimage", integer.valueof(5)); 10 this.put("listfile", integer.valueof(6)); 11 this.put("listimage", integer.valueof(7)); 12 } 13 }; 14 public static final int config = 0; 15 public static final int upload_image = 1; 16 public static final int upload_scrawl = 2; 17 public static final int upload_video = 3; 18 public static final int upload_file = 4; 19 public static final int catch_image = 5; 20 public static final int list_file = 6; 21 public static final int list_image = 7; 22 23 public actionmap() { 24 } 25 26 public static int gettype(string key) { 27 return ((integer)mapping.get(key)).intvalue(); 28 } 29 }
4.我进入到 uploader 类,上一步最后就是调用第10行的方法,因为配置里 不是base64 所以执行else里的内容,调用 binaryuploader 的save方法
1 public class uploader { 2 private httpservletrequest request = null; 3 private map<string, object> conf = null; 4 5 public uploader(httpservletrequest request, map<string, object> conf) { 6 this.request = request; 7 this.conf = conf; 8 } 9 10 public final state doexec() { 11 string filedname = (string)this.conf.get("fieldname"); 12 state state = null; 13 if ("true".equals(this.conf.get("isbase64"))) { 14 state = base64uploader.save(this.request.getparameter(filedname), this.conf); 15 } else { 16 state = binaryuploader.save(this.request, this.conf); 17 } 18 19 return state; 20 } 21 }
5. 我们继续进入到binaryuploader 的save方法 ,我们看到下面的代码的第33行,会去设定 “physicalpath ” 的值,并作为参数 调用 方法: storagemanager.savefilebyinputstream 进行保存,而“physicalpath ” 值是由 配置信息 参数 config 获取。所以我们需要通过修改配置 来 修改这个值就行了。
1 public static final state save(httpservletrequest request, map<string, object> conf) { 2 fileitemstream filestream = null; 3 boolean isajaxupload = request.getheader("x_requested_with") != null; 4 if (!servletfileupload.ismultipartcontent(request)) { 5 return new basestate(false, 5); 6 } else { 7 servletfileupload upload = new servletfileupload(new diskfileitemfactory()); 8 if (isajaxupload) { 9 upload.setheaderencoding("utf-8"); 10 } 11 12 try { 13 for(fileitemiterator iterator = upload.getitemiterator(request); iterator.hasnext(); filestream = null) { 14 filestream = iterator.next(); 15 if (!filestream.isformfield()) { 16 break; 17 } 18 } 19 20 if (filestream == null) { 21 return new basestate(false, 7); 22 } else { 23 string savepath = (string)conf.get("savepath"); 24 string originfilename = filestream.getname(); 25 string suffix = filetype.getsuffixbyfilename(originfilename); 26 originfilename = originfilename.substring(0, originfilename.length() - suffix.length()); 27 savepath = savepath + suffix; 28 long maxsize = ((long)conf.get("maxsize")).longvalue(); 29 if (!validtype(suffix, (string[])conf.get("allowfiles"))) { 30 return new basestate(false, 8); 31 } else { 32 savepath = pathformat.parse(savepath, originfilename); 33 string physicalpath = (string)conf.get("rootpath") + savepath; 34 inputstream is = filestream.openstream(); 35 state storagestate = storagemanager.savefilebyinputstream(is, physicalpath, maxsize); 36 is.close(); 37 if (storagestate.issuccess()) { 38 storagestate.putinfo("url", pathformat.format(savepath)); 39 storagestate.putinfo("type", suffix); 40 storagestate.putinfo("original", originfilename + suffix); 41 } 42 43 return storagestate; 44 } 45 } 46 } catch (fileuploadexception var14) { 47 return new basestate(false, 6); 48 } catch (ioexception var15) { 49 return new basestate(false, 4); 50 } 51 } 52 }
6.上面都是在分析代码,下面就开始修改了,我们在配置文件“ueditor/jsp/config.json”里添加 saverootpath ,这就是存储图片或文件的绝对根路径,修改 imageurlprefix 的值,这个链接是要指向 绝对根路径,用于访问图片或文件,大家可以搭一个nginx服务器,或者直接用tomcat也可以,只要能访问都行。
"saverootpath": "/data/", /* 文件和图片上传绝对根路径*/ /* 上传图片配置项 */ "imageactionname": "uploadimage", /* 执行上传图片的action名称 */ "imagefieldname": "upfile", /* 提交的图片表单名称 */ "imagemaxsize": 2048000, /* 上传大小限制,单位b */ "imageallowfiles": [".png", ".jpg", ".jpeg", ".gif", ".bmp"], /* 上传图片格式显示 */ "imagecompressenable": true, /* 是否压缩图片,默认是true */ "imagecompressborder": 1600, /* 图片压缩最长边限制 */ "imageinsertalign": "none", /* 插入的图片浮动方式 */ "imageurlprefix": "http://xxx", /* 指向saverootpath的url,用于访问图片或文件*/
"imagepathformat": "/ueditor/jsp/upload/image/{yyyy}{mm}{dd}/{time}{rand:6}",
7. 我们在 第 3 步 的invoke() 方法 中调用的 this.configmanager.getconfig(actioncode); 方法里 组装绝对根路径。就是在返回conf之前添加 下面代码中的红色内容。
1 conf.put("savepath", savepath); 2 conf.put("rootpath", this.rootpath); 3 conf.put("saverootpath",this.jsonconfig.getstring("saverootpath")); 4 return conf;
8. 最后我们把 第5步 里的 save 方法里的 physicalpath 值修改一下 ,注释原来的内容,新增下面代码的红色内容。
1 // string physicalpath = (string)conf.get("rootpath") + savepath; 2 string physicalpath = (string)conf.get("saverootpath") + savepath;
这样 我们就把 原来的相对路径改成了我们想要的绝对路径了,大家可以尝试一下。
好了时间不早了,要休息了,大家如果有什么更好的方法,可以在评论去留言,大家一起讨论!如果有什么不妥之处也请大家多多指教!
上一篇: 网站文章发布数量及伪原创、原创分析
下一篇: 使用Python处理BAM的方法