ueditor 配置和上传图片
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了ueditor 配置和上传图片相关的知识，希望对你有一定的参考价值。
一、 在线编辑器在页面正常显示
1. 上百度Editor首页下载http://ueditor.baidu.com/website/
2. COPY到自己的项目中去，然后记住ueditor所在文件的目录
（copy的时候一定要注意放的位置）
3. 配置editor_config.js中的URL(这一步很重要)，因为我在html文件中测试的时候是没有修改配置文件的信息也可以用，但是用在项目编辑器就无法显示
/** * 此处配置写法适用于UEditor小组成员开发使用，外部部署用户请按照上述说明方式配置即可，建议保留下面两行，以兼容可在具体每个页面配置window.UEDITOR_HOME_URL的功能。 */var tmp = location.protocol.indexOf("file")==-1 ? location.pathname : location.href; URL = window.UEDITOR_HOME_URL||tmp.substr(0,tmp.lastIndexOf("\/")+1).replace("_examples/","").replace("website/","");//这里你可以配置成ueditor目录在您网站的相对路径或者绝对路径（指以http开头的绝对路径）
/** * 配置项主体。注意，此处所有涉及到路径的配置别遗漏URL变量。 */ window.UEDITOR_CONFIG = { //为编辑器实例添加一个路径，这个不能被注释 UEDITOR_HOME_URL : URL //图片上传配置区 ,imageUrl:URL+"jsp/imageUp.jsp" //图片上传提交地址 ,imagePath:URL + "jsp/" //图片修正地址，引用了fixedImagePath,如有特殊需求，可自行配置
图片上传路径配置区域是在：ueditor.config.js里URL路径是直接指向了ueditor所在项目中的位置。如：/tools/editor/
原因是window.UEDITOR_HOME_URL没有定义，只要在引入script脚本前声明并复制就可以正常使用了，见下代码：
<!DOCTYPE HTML><html><head><title>完整的demo</title><meta http-equiv="Content-Type" content="text/html;charset=gbk"/><script>var UEDITOR_HOME_URL ="/ueditor/"; //从项目的根目录开始 </script><link type="text/css" href="./themes/default/css/ueditor.css" rel="stylesheet"/><script type="text/javascript" src="./editor_config.js"></script><script type="text/javascript" src="./editor_all.js"></script></head><body><div><script id="myEditor" type="text/plain">欢迎使用</script></div><script type="text/javascript">//初始化var ue = UE.getEditor(‘myEditor‘);</script></body></html>
还有一点就是，如果没有引入editor.css文件那么部分功能的显示将会没有那么好看。(废话。。。)
二、 图片上传
1. 具体包括imageUp.jsp和Uploader.java这两个文件
2. 在jsp页面中只需要引入正确Uploader.java所在的包就行。
3. 剩下的工作就是在Uploader.java中修改图片上传的目录、制定文件名生成规则等等。 做实现过程中让我很纠结的是：配置完成没问题了，但是就是图片上传不成功具体错误如下：
3.1 在没有找到Uploader类的情况下就会报：网络设置不正确，上传失败(大概就是这个意思。。。)
3.2 所有的工作都做完的情况下，上传图片就是不成功，捕获异常呢也捕获不到，最后设置断点之后才知道fii.hasNext()返回为false，根本原因就是：
因为我用的是S2SH框架，在web.xml中struts2过滤器中把*.jsp去掉，如下代码应该去掉，那就OK了：
1<filter-mapping>2<filter-name>struts2</filter-name>3<url-pattern>*.jsp</url-pattern>4</filter-mapping>
1publicvoid upload() throws Exception{ 2boolean isMultipart = ServletFileUpload.isMultipartContent(this.request); 3if (!isMultipart) { 4this.state = this.errorInfo.get("NOFILE"); 5return; 6 } 7 DiskFileItemFactory dff = new DiskFileItemFactory(); 8 String savePath = this.getFolder(this.savePath); 9 dff.setRepository(new File(savePath));10try {11 ServletFileUpload sfu = new ServletFileUpload(dff);12 sfu.setSizeMax(this.maxSize * 1024);13 sfu.setHeaderEncoding("gbk");14FileItemIterator fii = sfu.getItemIterator(this.request);15 while (fii.hasNext()) {16 FileItemStream fis = fii.next();17if (!fis.isFormField()) {18this.originalName = fis.getName().substring(fis.getName().lastIndexOf(System.getProperty("file.separator")) + 1);19if (!this.checkFileType(this.originalName)) {20this.state = this.errorInfo.get("TYPE");21 continue;22 }23this.fileName = this.getName(this.originalName);24this.type = this.getFileExt(this.fileName);25this.url = savePath + "/" + this.fileName;26 BufferedInputStream in = new BufferedInputStream(fis.openStream());27 FileOutputStream out = new FileOutputStream(new File(this.getPhysicalPath(this.url)));28 BufferedOutputStream output = new BufferedOutputStream(out);29 Streams.copy(in, output, true);30this.state=this.errorInfo.get("SUCCESS");31//UE中只会处理单张上传，完成后即退出
32 break;33 } else {34 String fname = fis.getFieldName();35//只处理title，其余表单请自行处理36if(!fname.equals("pictitle")){37 continue;38 }39 BufferedInputStream in = new BufferedInputStream(fis.openStream());40 BufferedReader reader = new BufferedReader(new InputStreamReader(in));41 StringBuffer result = new StringBuffer(); 42while (reader.ready()) { 43 result.append((char)reader.read()); 44 }45this.title = new String(result.toString().getBytes(),"gbk");46 reader.close(); 47 }48 }49 } catch (Exception e) {50 e.printStackTrace();51this.state = this.errorInfo.get("UNKNOWN");52 }53 }
ueditor ：百度的一款富文本的编辑器，但是我总体用上来的感觉就是，不好用，配置路径什么的，好麻烦啊，不知道是不是用多了之后会不会有所改变。
以上是关于ueditor 配置和上传图片的主要内容，如果未能解决你的问题，请参考以下文章