MuaRine
博客园
首页
新随笔
联系
管理
随笔 - 96 文章 - 0 评论 - 12
百度Ueditor在线编辑器的配置和图片上传
一、 在线编辑器在页面正常显示
1. 上百度Editor首页下载
http://ueditor.baidu.com/website/2. COPY到自己的项目中去，然后记住ueditor所在文件的目录
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>
1 public void upload() throws Exception{
2 boolean isMultipart = ServletFileUpload.isMultipartContent(this.request);
3 if (!isMultipart) {
4 this.state = this.errorInfo.get("NOFILE");
5 return;
6 }
7 DiskFileItemFactory dff = new DiskFileItemFactory();
8 String savePath = this.getFolder(this.savePath);
9 dff.setRepository(new File(savePath));
10 try {
11 ServletFileUpload sfu = new ServletFileUpload(dff);
12 sfu.setSizeMax(this.maxSize * 1024);
13 sfu.setHeaderEncoding("gbk");
14 FileItemIterator fii = sfu.getItemIterator(this.request);
15 while (fii.hasNext()) {
16 FileItemStream fis = fii.next();
17 if (!fis.isFormField()) {
18 this.originalName = fis.getName().substring(fis.getName().lastIndexOf(System.getProperty("file.separator")) + 1);
19 if (!this.checkFileType(this.originalName)) {
20 this.state = this.errorInfo.get("TYPE");
21 continue;
22 }
23 this.fileName = this.getName(this.originalName);
24 this.type = this.getFileExt(this.fileName);
25 this.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);
30 this.state=this.errorInfo.get("SUCCESS");
31 //UE中只会处理单张上传，完成后即退出
32 break;
33 } else {
34 String fname = fis.getFieldName();
35 //只处理title，其余表单请自行处理
36 if(!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();
42 while (reader.ready()) {
43 result.append((char)reader.read());
44 }
45 this.title = new String(result.toString().getBytes(),"gbk");
46 reader.close();
47 }
48 }
49 } catch (Exception e) {
50 e.printStackTrace();
51 this.state = this.errorInfo.get("UNKNOWN");
52 }
53 }
写博客不仅是一种习惯，更是一种沉淀。
分类: Java, Java Web, JEECMS
好文要顶 关注我 收藏该文
MuaRine
关注 - 8
粉丝 - 16
+加关注
0
0
(请您对文章做出评价)
« 上一篇：Android系统平台架构+目录说明
» 下一篇：Scroll-Jquery列表无间隙滚动
posted @ 2013-05-30 19:58 MuaRine 阅读(92021) 评论(1) 编辑 收藏
评论列表
#1楼2016-03-07 10:04 We_Are_Friends!
哥们，你好
请问，编辑的内容包括图片，上传到服务器的格式是什么，服务器如何得到图片
另外，有asp mvc 现成的代码么
谢谢
支持(0)反对(0)
刷新评论刷新页面返回顶部
注册用户登录后才能发表评论，请 登录 或 注册，访问网站首页。
最新IT新闻:
· 虚拟现实和计算机带来的艺术 堪称梦幻
· Win 10系统最应该加入的5项功能 你同意吗？
· 搜狗公布第二季度财报 营收11.5亿净利2.2亿元
· 网易证实原网易音乐高级总监王磊已于4月离职
· Google说，手游要出海赚国际友人的钱
» 更多新闻...
最新知识库文章:
· 可是姑娘，你为什么要编程呢？
· 知其所以然（以算法学习为例）
· 如何给变量取个简短且无歧义的名字
· 编程的智慧
· 写给初学前端工程师的一封信
» 更多知识库文章...
公告
昵称：MuaRine
园龄：4年1个月
粉丝：16
关注：8
+加关注
我的标签
Jquery(2)
PHP、LAMP(1)
Android(1)
cocos2d-x(1)
GAE翻墙(1)
随笔分类
Ajax(1)
Android错误(3)
Android小想法
Android小知识(7)
C/C++(3)
cocos2d-x(4)
CSS
DataBase(2)
FreeMarker(6)
Hibernate(4)
Html(5)
Html5
iBATIS
Java(19)
Java Web(17)
JavaScript(1)
JEECMS(14)
Jquery(9)
Linux(1)
Lua
Lucene
Mysql
Resin(1)
Spring(1)
SSO(1)
Struts(4)
Tomcat(2)
代码管理(3)
数据库(3)
心得体会(9)
杂记(10)
Link
JC
九
九九
能能大叔
晓峰哥
志志
最新评论
1. Re:百度Ueditor在线编辑器的配置和图片上传
哥们，你好
请问，编辑的内容包括图片，上传到服务器的格式是什么，服务器如何得到图片
另外，有asp mvc 现成的代码么
谢谢
--We_Are_Friends!
2. Re:Data truncation: Data too long for column 'id' at row 1
貌似解决不了批处理executeBatch()的相同异常...
--mengrennwpu
3. Re:链式编程----可以为你省去很多重复的代码
如果再加上泛型的话，代码就更加叼了
--愤怒的TryCatch
4. Re:链式编程----可以为你省去很多重复的代码
如果再加上泛型的话，代码就更加叼了
--我们的阳光很盐
5. Re:链式编程----可以为你省去很多重复的代码
如果再加上泛型的话，代码就更加叼了
--kk_cockroach
阅读排行榜
1. JSON--List集合转换成JSON对象(146445)
2. 百度Ueditor在线编辑器的配置和图片上传(92021)
3. SVN客户端无法连接服务器的问题(34990)
4. Oracle起步---创建临时表空间/表空间/创建用户/授权(26163)
5. Data truncation: Data too long for column 'id' at row 1(19129)
推荐排行榜
1. SVN客户端无法连接服务器的问题(3)
2. JSON--List集合转换成JSON对象(3)
3. 链式编程----可以为你省去很多重复的代码(2)
4. Oracle起步---创建临时表空间/表空间/创建用户/授权(1)
5. 用js判断页面是否加载完成(1)
Copyright ©2016 MuaRine