Struts2+Ueditor配置和图片上传

来源:互联网 发布:windows操作系统快捷键 编辑:程序博客网 时间:2024/06/10 21:38

正文开始之前,我先说说没什么我要写这篇文章,要知道在这之前我是从来不在网上写文章的。这几天正在做我们专业的网站(笔者是一个学生),里面有新闻发布的功能,于是就与Ueditor打上了交道。但是问题也随之而来了,Ueditor图片上传不上去,编辑的图片不能用。然后就在网上找资料,看到大量的信息,很高兴,按照以往的经验,这么多信息应该有一个会解决问题,然而花费了一整天,把网上的所有回答都试了一遍还是没有解决问题,很伤心,决定自己看源码自己解决,又花费了一天,傍晚的时候问题解决了。
正文开始:
项目结构:
这里写图片描述

运行结果:
这里写图片描述

  • 步骤一:
    下载Ueditor:http://ueditor.baidu.com/website/download.html#mini
    目前最新版:这里写图片描述

  • 步骤二:
    解压下载好的umeditor1_2_2-utf8-jsp
    在项目的根目录下新建文件夹:ueditor
    复制
    这里写图片描述
    粘贴到刚新建的ueditor文件目录下

  • 步骤三:
    把ueditor/jsp下的两个jar包复制到根目录下WEB-INF/lib下
    这里写图片描述

  • 步骤四:
    在根目录下新建jsp页面,把ueditor目录下的index.html复制到刚新建的页面中,并修改js和css路径
    这里写图片描述
    说明:ueditor.css文件是我把index.html页面里的css样式分离出来了

  • 步骤五:
    运行就可以看见已经配置好了,可以编辑文字了,但是还不能上传图片

  • 步骤六:
    在ueditor目录下新建upload/image文件夹,用来存储上传的图片

  • 步骤七:
    把ueditor目录下jsp下的的Uploader.jar复制到java文件包底下
    这里写图片描述

  • 步骤八:
    修改jsp文件下imageUp.jsp文件
    这里写图片描述
    以及
    这里写图片描述
    说明:up.setSavePath()采用的是相对路径;设置图片保存路径为ueditor目录下的upload下的image

  • 步骤九:
    修改ueditor目录下umeditor.config.js文件
    这里写图片描述
    说明:imagePath是设置你的页面显示上传的图片的路径,如果设置错误,图片可以上传成功,但是在页面显示不出来。双引号里面的配置路径是为了补全根路径与imageUp.jsp的up.setSavePath()路径之间的却失部分,这两个路径的配置相互影响

  • 步骤十:
    创建自己的拦截器(相当于一个过滤器)
    这里写图片描述
    说明:由于Struts2默认使用Apache的Commons FileUpload组件和内建的FileUploadInterceptor拦截器实现文件上传,它会将request中的文件域封装到action中的一个File类型的属性中,并删除request中的原有文件域,因此直接使用UEditor的imageUp.jsp上传文件会失败

  • 步骤十一:
    修改web.xml配置,采用自定义的拦截器
    这里写图片描述
    到此,上传图片就完成了。

1 0