百度富文本编辑器UEditor1.3上传图片附件等
今天一直在整我的一个项目的编辑器上传图片,我用的是百度UEditor 1.3版本号的;如今已经有了1.4的了,只是还算比較新吧,可是官网上面没有上传图片这些的教程,而网上对于这方面的资料非常少啊,折腾了我半天,看了一些曾经版本号的上传图片的问题,最后最终搞定了。
先说说我的这个项目的配置情况吧
用的是SSH框架:struts2.3.16 spring3.2.5 hibernate3.3.2
ueditor 1.3-utf-8-jsp版
jdk 1.7
开发工具用的是myeclipse10.7
直接把项目结构图贴上吧,图片略微p了一下,可是基本的东西都在
这个是ueditor目录里面的文件
须要将commons-fileupload-1.2.2.jar和ueditor.jar两个jar包放入lib目录下;注意commons-fileupload-1.2.2.jar在struts2里面也有,不要冲突了
这里在myeclipse里面会有js报错,不用管,看不惯能够直接delete掉全部js错误,只是要注意不要把真正的错误给delete掉了哦,比方jsp的错误,可能是类引用路径错了,这个要好好改改
这里怎样在jsp页面里面引用编辑器就不说了,自己去UEditor官网去找,说的比較具体,主要就说说怎么上传图片,附件这些都是类似的,这些在官网没怎么说明。
一般部署好后上传到一部分就会显示路径错误,未知路径,找不到上传文件之类的,这是由于使用struts2,被struts2的默认拦截器StrutsPrepareAndExecuteFilter给拦截掉了。所以我们要自己写一个拦截器,将其对图片、附件上传等不要进行拦截。
以下贴一下我的拦截器的代码吧
package com.phn.interceptor; import java.io.IOException;
import javax.servlet.FilterChain;
import javax.servlet.ServletException;
import javax.servlet.ServletRequest;
import javax.servlet.ServletResponse;
import javax.servlet.http.HttpServletRequest;
import org.apache.struts2.dispatcher.ng.filter.StrutsPrepareAndExecuteFilter; public class UEditorFilter extends StrutsPrepareAndExecuteFilter {
public void doFilter(ServletRequest req, ServletResponse res,
FilterChain chain) throws IOException, ServletException {
HttpServletRequest request = (HttpServletRequest) req;
// 获取url
String url = request.getRequestURI();
if ("/XXX/ueditor/jsp/imageUp.jsp".equals(url)) {
// 这里用XXX表示项目名,imageUp.jsp是上ueditor里面传图片的jsp,表示这个jsp不要被过滤,同理附件等上传也是一样配置
// 使用对编辑器的拦截器
chain.doFilter(req, res);
} else {// 前往使用默认的拦截器
super.doFilter(req, res, chain); }
}
}
上面代码比較简单,我就不具体说明了,相信大家应该能够看懂大致的意思
以下是web.xml的改动,原来的web.xml
<filter>
<filter-name>struts2</filter-name>
<filter-class>org.apache.struts2.dispatcher.ng.filter.StrutsPrepareAndExecuteFilter</filter-class>
</filter>
<filter-mapping>
<filter-name>struts2</filter-name>
<url-pattern>/*</url-pattern>
</filter-mapping>
改动后的web.xml
<filter>
<filter-name>struts2</filter-name>
<filter-class>com.phn.interceptor.UEditorFilter</filter-class>//这里配置的就是我自定义的拦截器
</filter>
<filter-mapping>
<filter-name>struts2</filter-name>
<url-pattern>/*</url-pattern>
</filter-mapping>
最后在tomcat里面部署好,执行測试一下,例如以下成功
这里我主要參考了
百度富文本编辑器UEditor1.3上传图片附件等的更多相关文章
- 百度富文本编辑器UEditor自定义上传图片接口
如下图: 然后修改ueditor.all.js
- 百度富文本编辑器UEditor安装配置全过程
网站开发时富文本编辑器是必不可少的,他可以让用户自行编辑内容的样式然后上传到后台!下面我们来介绍如何安装使用百度富文本编辑器 一.下载并且设置百度富文本编辑器的样式 你可以去百度UEditor ...
- ueditor富文本编辑器跨域上传图片解决办法
在使用百度富文本编辑器上传图片的过程中,如果是有一台单独的图片服务器就需要将上传的图片放到图片服务器,比如在a.com的编辑器中上传图片,图片要保存到img.com,这就涉及到跨域上传图片,而在ued ...
- Html引入百度富文本编辑器ueditor
在日常工作用,肯定有用到富文本编辑器的时候,富文本编辑器功能强大使用方便,我用的是百度富文本编辑器,首先需要下载好百度编辑器的demo, 然后创建ueditor.html文件,引入百度编辑器,然后在h ...
- UEditor 百度富文本编辑器 .Net实例
转自 http://download.csdn.net/download/hdsslxl/6740605 1.UEditor 百度富文本编辑器完整版 .Net实例 已解决上传图片问题. 2.内附完整d ...
- JAVA 集成 Ueditor 百度富文本编辑器
开发环境:一个简单的SpringMVC框架中,用百度富文本编辑器 ueditor 实现图片和文件的上传 官网地址:http://ueditor.baidu.com/website/ 需要使用到的2个文 ...
- vue集成百度富文本编辑器
1.前期工作,访问百度富文本官网下载相应的百度富文本文件,根据后端用的技术下载相应的版本,建议下载最新版UTF-8版 (有图有真相,看图) https://ueditor.baidu.com/webs ...
- Html引入百度富文本编辑器ueditor及自定义工具栏
在日常工作用,肯定有用到富文本编辑器的时候,富文本编辑器功能强大使用方便,我用的是百度富文本编辑器,首先需要下载好百度编辑器的demo, 然后创建ueditor.html文件,引入百度编辑器,然后在h ...
- thinkphp5.1中适配百度富文本编辑器ueditor
百度富文本编辑器ueditor虽然很老,但是功能齐全,我近期需要能批量粘贴图片的功能,但是找不到,很无奈.然后现在就分享一下如何把ueditor适配到thinkphp5.1,有知道如何批量上传图片的艾 ...
随机推荐
- sql: sybase与oracle中insert into select和select into的用法
1. sybase与oracle中insert into select和select into的用法 http://wjlvivid.iteye.com/blog/1921679 Sybase 一.首 ...
- linux命令:du,看文件大小
du -s698 . (698字节)From <http://jingyan.baidu.com/article/a17d52855c10bf8098c8f2c9.html>
- linux脚本:shell, 判断输入参数的个数(命令行)
if [ $# != 3 ] ; thenecho "USAGE: $0 from to"echo " e.g.: $0 ~/oucaijun/from ~/oucaij ...
- 图片组件——axure线框图部件库介绍
我们在后面的组件使用中,都统一使用"从部件区域拖拽图片组件到页面区域中" 1. 图片载入 1.1 将图片组件拖拽到页面区域 1.2 双击图片组件 1.3 选择合适图片,点击打开 1 ...
- ubuntu12.04 安装 opencv 2.4.8(非源代码编译)
一:安装所须要的各种库,如GTK3.xx 安装GCC:sudo apt-get install build-essential 安装CMakesudo apt-get install cmake su ...
- 从零开始学C++之异常(一):C语言错误处理方法、C++异常处理方法(throw, try, catch)简介
一.C语言错误处理方法 1.返回值(if … else语句判断错误) 2.errno(linux 系统调用) 3.goto语句(函数内局部跳转) 4.setjmp.longjmp(Do not use ...
- 6月19日 NSFileHandle文件类的常用方法
NSFileManager类主要对文件的操作(删除,修改,移动,复制等): NSFileHandle类主要对文件内容进行读取和写入操作 NSFileHandle处理文件的步骤 ...
- 安装Linux_[CentOS]系统
Lunx操作系统安装 虚拟机:VirtualBox. 操作系统的选择:CentOS 6.3. (64位/32位都可). (CentOS:诞生于社区的企业级操作系统). Install Or Upgra ...
- Tomcat 用户配置
如果你没有改变任何配置文件,请检查文件conf / tomcat用户.xml在你安装.该文件必须包含凭证让你使用这个应用. 例如,添加一个用户名为tomcat manager gui角色s3cret密 ...
- Codeforces Round #256 (Div. 2) 题解
Problem A: A. Rewards time limit per test 1 second memory limit per test 256 megabytes input standar ...