百度富文本编辑器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里面部署好,运行测试一下,如下成功

这里我主要参考了

http://bbs.csdn.net/topics/390678241?page=1#post-397864644

http://download.csdn.net/detail/xiangyangsanren/4849558

百度富文本编辑器UEditor1.3上传图片附件等

时间: 2024-11-07 15:00:46

百度富文本编辑器UEditor1.3上传图片附件等的相关文章

百度富文本编辑器UEditor自定义上传图片接口

如下图:  然后修改ueditor.all.js 

ueditor百度富文本编辑器使用解决方案

写网站的时候都是用asp.net2.0写的 但是看了百度的富文本编辑器使用说明都是.net framework 4.0 版本的 百度了半天看的各种的解决方案 我把最新版本的百度富文本编辑器下载下来 改了.sln 文件信息 可以用vs2008打开 当然会报一些错误 ..类名不存在等等 百度了半天还是没解决问题后来放弃了.(最终还是用了百度的) 于是就找了kindeditor但是觉得他长得有点丑..还是放弃了 又接着百度ueditor配置方法看到了一篇博文 http://blog.sina.com.

Django集成百度富文本编辑器uEditor

UEditor是由百度web前端研发部开发所见即所得富文本web编辑器,具有轻量,可定制,注重用户体验等特点,开源基于MIT协议,允许自由使用和修改代码. 首先从ueEditor官网下载最新版本的包,目前官网上提供了ASP..NET.PHP.JSP版本的,django版本只有一个第三方个人开发的,但看上出配置起来稍微复杂一点. 这里不介绍uEditor的使用方法,也不过多解释uEditor的配置方法,官网上都有详细的文档和API介绍,下载的Demo中也有常用的方法的示例代码,这里主要介绍uEdi

百度富文本编辑器

[下载所需资源]---------------------------------------百度搜索-- 百度富文本编辑器--进入首页(百度编辑器-UEditor-首页) 百度编辑器 - UEditor - 首页-- 上方导航[下载]--选择对应的版本下载(我选的是 1.4.3.3 .Net 版本 utf-8版) [把资源引入自己的项目]--------------------------------------- 这里,模拟需求:新建一个项目  MyTest,要使用  富文本编辑器的功能. 

类百度富文本编辑器文件上传。

在项目安开发中,有一个需求是用户需上传特定的text文件,根据此文件判断设备的状态. 以上是需求,此时需要在页面上用到文件上传的功能,原始的文件上传样式不好看,自己此段时间一直都在用layui前端框架写页面,本想用layui官网上给的文件上传功能的,但是经理说上传的文件不能只显示文件名, 还要配上一张图片.layui上传文件的模式都是: 显然这个版本的文件上传还没有符合项目的需要. 在接下来的对比中,看到了百度富文本编辑器的文件上传和图片上传样式:       因为这个功能是在百度富文本编辑器工

ueditor富文本编辑器跨域上传图片解决办法

在使用百度富文本编辑器的过程中,如果是有一台单独的图片服务器就需要将上传的图片内容放到图片服务器,也就是比如在a.com的编辑器上传图片,图片要保存到img.com的跨域上传图片功能,而在ueditor官方文档中说不支持单图上传的跨域, 网上查了一下各种花里胡哨,一顿操作猛如虎,比如加document.domain,配置全域名的等等都是然并卵,我仔细研究了一下ueditor的demo文件,相出了一个折中办法,很简单只需要修改demo中两个地方的代码外加写一个上传接口即可. 首先引入页面uedit

UEditor百度富文本编辑器--让编辑器自适应宽度的解决方案

UEditor百度富文本编辑器的initialFrameWidth属性,默认值是1000. 不能够自适应屏幕宽度.如图1: 刚开始的时候,我是直接设置initialFrameWidth=null的.效果如图2: 这样子UEditor百度富文本编辑器会在第一次加载的时候获取屏幕宽度,然后赋值给initialFrameWidth属性. 这样子确实是可以在第一次加载的时候适应屏幕宽度,但是却似乎宽度稍微过了一点点,超过上面的灰条了.而且这里还有一个问题: 当你改变浏览器大小时,会有个很严重的排版BUG

[转]UEditor百度富文本编辑器--让编辑器自适应宽度的解决方案

转自http://www.cnblogs.com/VAllen/p/UEditor-InitialFrameWidth-Auto.html UEditor百度富文本编辑器的initialFrameWidth属性,默认值是1000. 不能够自适应屏幕宽度.如图1: 刚开始的时候,我是直接设置initialFrameWidth=null的.效果如图2: 这样子UEditor百度富文本编辑器会在第一次加载的时候获取屏幕宽度,然后赋值给initialFrameWidth属性. 这样子确实是可以在第一次加

关于百度富文本编辑器UEdit的初始化内容失败问题

百度富文本编辑器毫无疑问是强大的,但也会出问题.这个问题是在脚本中普遍存在的,由异步性导致的加载顺序问题. 我们使用 var ue = UE.getEditor('editor', {}); 创建实例. 并使用 ue.setContent("Helllo World!"); 初始化内容. 但是有时候初始化失败. 原因是初始化的时候富文本编辑器还没有加载完成. 这个原因对于经验丰富的攻城狮不难想到,因为js的异步问题不是只在这产生,很多时候都有这种异步导致的加载顺序问题. 对此头疼了一整