[转载]UEditor就不多说了,它是由百度web前端研发部开发所见即所得富文本web编辑器,具有轻量,可定制,注重用户体验等特点,开源基于BSD协议,允许自由使用和修改代码。
UEditor 源码自带一个图片上传的jsp代码,详见ueditor根目录下的“server/upload/jsp/imageUp.jsp”文件。但是如果项目中使用了Apache Struts2框架,由于该框架默认使用Apache的Commons FileUpload组件和内建的FileUploadInterceptor拦截器实现文件上传,将request中的文件域封装到action中的一个File类型的属性中,并删除request中的原有文件域,因此直接用imageUp.jsp上传文件会失败。
解决方法有很多,例如可以自己写一个action来处理文件上传(注意action中文件域的属性名是picdata);或者自定义一个拦截器栈,去掉默认的FileUpload拦截器;或者配置struts不对jsp文件进行过滤等方法。笔者认为对项目影响最少、最简单的方法是自定义一个过滤器,单独指定不对imageUp.jsp进行过滤;代码示例如下:
01 |
package com.taiji.yagl.security;
|
03 |
import javax.servlet.FilterChain;
|
04 |
import javax.servlet.ServletRequest;
|
05 |
import javax.servlet.ServletResponse;
|
06 |
import javax.servlet.http.HttpServletRequest;
|
08 |
import org.apache.struts2.dispatcher.ng.filter.StrutsPrepareAndExecuteFilter;
|
10 |
public class MyStrutsFilter extends StrutsPrepareAndExecuteFilter{
|
12 |
public void doFilter(ServletRequest req, ServletResponse res, FilterChain chain) {
|
13 |
HttpServletRequest request = (HttpServletRequest) req;
|
14 |
String url = request.getRequestURI();
|
16 |
if ( "imageUp.jsp" .equals(url.substring(url.length()- 11 ))) {
|
17 |
chain.doFilter(req, res);
|
19 |
super .doFilter(req, res, chain);
|
22 |
System.out.println( "Exception in MyStrutsFilter" );
|
然后在web.xml中将struts2的过滤器换成这个类就行了:
2 |
< filter-name >struts2</ filter-name >
|
3 |
< filter-class >com.taiji.yagl.security.MyStrutsFilter</ filter-class >
|
不过,这个imageUp.jsp也不是拿来就能用的,文件上传成功之后,它返回一个JSON格式的字符串,其中的url字段代表上传成功之后,通过url访问该文件的真实路径。ueditor根目录下的editor_config.js文件中的imagePath属性说是用来修正后台返回的“url”的,其实就是在“url”字符串的前面加上这个字符串而已。笔者直接将其置为空字符串""。 最后说一下文件上传位置的问题。默认是将文件上传到服务器部署的临时目录下的一个文件夹下;这样一旦服务器执行“clean”等清除操作,之前上传的文件都没了。而且图片或者附件这东西一般都比较大,直接传到服务器上,也不是长久之计,于是笔者建议将图片或附件上传到一个单独的服务器上。由于时间有限没有研究FTP服务器神马的高级玩意儿,笔者的方案是在服务器上用一个专用的账号(比如用户名guest,密码guest),共享一个专用的文件夹并对guest用户开放所有权限,然后把这个文件夹发布到web上。文件的上传使用了JCIFS的开源Smb组件;修改后的imageUp.jsp全文如下:
01 |
<%@ page language= "java" contentType= "text/html; charset=UTF-8" |
02 |
pageEncoding= "UTF-8" %>
|
03 |
<%@ page import = "java.io.*" %>
|
04 |
<%@ page import = "org.apache.commons.fileupload.*" %>
|
05 |
<%@ page import = "org.apache.commons.fileupload.util.*" %>
|
06 |
<%@ page import = "org.apache.commons.fileupload.servlet.*" %>
|
07 |
<%@ page import = "org.apache.commons.fileupload.FileItemIterator" %>
|
08 |
<%@ page import = "org.apache.commons.fileupload.disk.DiskFileItemFactory" %>
|
09 |
<%@ page import = "java.util.regex.Matcher" %>
|
10 |
<%@ page import = "java.util.regex.Pattern" %>
|
11 |
<%@ page import = "java.util.Date" %>
|
12 |
<%@ page import = "jcifs.smb.SmbFile" %>
|
13 |
<%@ page import = "jcifs.smb.SmbFileInputStream" %>
|
14 |
<%@ page import = "jcifs.smb.SmbFileOutputStream" %>
|
18 |
String filePath = "/fj_yagl/upload/image" ;
|
20 |
String realPath = "smb://guest:guest@WIN-FILESERVER/NetShare" + filePath;
|
21 |
<pre name= "code" class = "java" >
|
22 |
DiskFileItemFactory dff = new DiskFileItemFactory(); dff.setRepository(dir); dff.setSizeThreshold( 1024000 ); ServletFileUpload sfu = new ServletFileUpload(dff); FileItemIterator fii = sfu.getItemIterator(request); String title = "" ;
|
24 |
{state = "文件类型不允许!" ; break ;}fileName = new Date().getTime()+fileName.substring(fileName.lastIndexOf( "." ),fileName.length()); url = realPath+ "\\" +fileName; BufferedInputStream in = new BufferedInputStream(fis.openStream());
|
25 |
output = new BufferedOutputStream( new SmbFileOutputStream(smbFile)); Streams.copy(in, output, true );
|
26 |
byte c [] = new byte [ 10 ]; int n = 0 ; while ((n=in.read(c))!=- 1 ){ title = new String(c, 0 ,n); break ; } } } } catch (Exception e){ e.printStackTrace(); } }title = title.replace( "&" , "&" ).replace( "'" , "&qpos;" ).replace( "\"" , "" ").replace(" < ", " < ").replace(" > ", " >");
|
27 |
response.getWriter().print( "{'url':'" + urlPrefix + filePath+ "/" +fileName+ "','title':'" +title+ "','state':'" +state+ "'}" );}%>
|
30 |
<p><span style= "color:rgb(62,62,62); font-family:Simsun; line-height:18px" ></span></p>
|
分享到:
相关推荐
SpringBoot整合layui和百度富文本编辑器ueditor入门使用教程 本教程将指导您如何将layui和百度富文本编辑器ueditor整合到SpringBoot项目中。ueditor是一种轻量、可定制、注重用户体验的富文本web编辑器,由百度的...
在开发Web应用时,我们经常会使用富文本编辑器来提供用户友好的文本输入体验,而百度的Ueditor是一个广泛使用的富文本编辑器。它提供了丰富的功能,如图片、视频、表格等插入,使得内容创作更加便捷。然而,在实际...
百度控件ueditor图片上传到远程服务器解决方案 一、搭建ueditor环境 二、修改源码 三、重新编译源码 四、使用说明
Spring+Vue整合UEditor富文本实现图片附件上传的方法是指将UEditor富文本编辑器集成到Spring和Vue项目中,以实现图片附件上传的功能。下面将详细介绍这个方法的实现步骤和关键技术点。 UEditor富文本编辑器 ...
4. UEditor:UEditor是由百度开发的一款富文本编辑器,具有丰富的编辑功能,如图片上传、视频插入、公式编辑等。它支持自定义配置,可以满足不同场景下的需求,为用户提供了一流的在线编辑体验。 5. Shiro:Apache ...
百度富文本编辑器UEditor是一款由百度公司开发的开源富文本编辑器,它在1.4.3版本中提供了丰富的功能和优秀的用户体验,适用于网页内容编辑、论坛发帖、博客写作等多种场景。UEditor以其易用性、稳定性和可定制性...
百度ueditor编辑器将图片上传到非项目根路径(保存在磁盘上)或独立服务器解决方案 教程:https://blog.csdn.net/qq_16220645/article/details/78860497 源码已经修改好了,直接buildpath到项目里就OJBK
本篇文章将深入探讨如何解决ueditor上传图片时的跨域问题以及如何自定义图片上传插件。 首先,我们要理解什么是跨域(CORS)。跨域是指一个域下的文档或脚本尝试请求另一个域下的资源时,如果两个域不相同,则...
ueditor1.4.3 富文本插件完美使用,搭建后可以直接上传图片以及多图片上传回显。主要的配置在config.json。可以查看官网ip,一般人出问题都是在config.json,或者不知道案例文件该怎么放,放哪里。
2. **图片和文件上传**:在"百度富文本编辑器UEditor示例"中,图片和附件的上传功能是重点。用户可以直接在编辑器中上传本地图片或文件,编辑器会自动处理上传流程,大大简化了内容创作的过程。 3. **视频支持**:...
【百度富文本编辑器 ueditor 使用总结】 在Web开发中,富文本编辑器是一个不可或缺的工具,它允许用户以类似Word的方式编辑网页内容。百度的ueditor是一款功能强大的开源富文本编辑器,广泛应用于博客、论坛、CMS...
**百度Ueditor在线富文本编辑器** 百度Ueditor是一款由百度公司开发的开源、免费的在线富文本编辑器,主要用于Web应用中提供便捷的文本编辑功能。它以其强大的功能、良好的用户体验以及易于集成的特点,被广泛应用...
【百度富文本编辑器ueditor上传图片宽高超范围问题详解】 在使用百度富文本编辑器ueditor时,用户可能会遇到一个常见的问题:当上传的图片尺寸超过预设限制时,图片在编辑器内显示不全,同时在网页发布后也可能导致...
**百度富文本编辑器Ueditor 1.8.1详解** 在Web开发中,富文本编辑器是不可或缺的工具,它允许用户以类似Word的方式在网页上编辑内容,包括字体、颜色、样式、图片和链接等。百度Ueditor是一款开源的、功能强大的富...
**PHP版百度富文本编辑器ueditor** 在Web开发中,富文本编辑器是不可或缺的工具,它允许用户以类似于Microsoft Word的方式创建和编辑内容,然后以HTML格式存储。其中,百度开发的ueditor是一款非常受欢迎的开源富...
1 ueditor 文件夹放到 public文件下 2 修改配置 如果是前后端分离部署,请求地址修改 ueditor.all.js 3 在config.ts里 headScripts添加配置 引入 文件 具体使用方法在另一个文章里面有
1、UEditor 百度富文本编辑器完整版 .Net实例 已解决上传图片问题。 2、内附完整demo实例,附带txt讲解说明及UEditor常见问题解决方案。 3、已经调试好的百度文本编辑器实例,用户体验不错,具备很多人性化的功能,...
百度UEditor富文本demo,使用目前最新1.4.3.1 jsp utf-8版本。关键类EditorController访问地址http://localhost:8080/project/editor!toAddOrEdit。jsp地址WebRoot/WEB-INF/jsp/editor
**百度富文本编辑器——ueditor1_4_3_3-utf8-jsp详解** 在Web开发中,富文本编辑器(Rich Text Editor)扮演着至关重要的角色,它允许用户在网页上创建和编辑带有格式的文本,如字体、颜色、大小、对齐方式等。...