百度ueditor能不能上传pdf
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了百度ueditor能不能上传pdf相关的知识，希望对你有一定的参考价值。
可以上传的，如果不能上传，在js代码里设置下；一般百度官方下载的ueditor编辑器，默认都是带了PDF上传功能的，参考如下官方代码：//默认值：
[
".png", ".jpg", ".jpeg", ".gif", ".bmp",
".flv", ".swf", ".mkv", ".avi", ".rm", ".rmvb", ".mpeg", ".mpg",
".ogg", ".ogv", ".mov", ".wmv", ".mp4", ".webm", ".mp3", ".wav", ".mid",
".rar", ".zip", ".tar", ".gz", ".7z", ".bz2", ".cab", ".iso",
".doc", ".docx", ".xls", ".xlsx", ".ppt", ".pptx", ".pdf", ".txt", ".md", ".xml"
] 参考技术A 可以上传的，若不能上传，就在js代码里设置下；一般百度官方下载的ueditor编辑器，默认都是带了PDF上传功能的，参考如下官方代码：
//默认值：
[
".png", ".jpg", ".jpeg", ".gif", ".bmp",
".flv", ".swf", ".mkv", ".avi", ".rm", ".rmvb", ".mpeg", ".mpg",
".ogg", ".ogv", ".mov", ".wmv", ".mp4", ".webm", ".mp3", ".wav", ".mid",
".rar", ".zip", ".tar", ".gz", ".7z", ".bz2", ".cab", ".iso",
".doc", ".docx", ".xls", ".xlsx", ".ppt", ".pptx", ".pdf", ".txt", ".md", ".xml"
] 参考技术B 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 参考技术C 可以，在设置里面加上pdf格式的就行 参考技术D 只是传文件的话，不能传可以改后缀名 txt jpg png …………
Spring Boot集成百度Ueditor
遇到的问题：
1.将ueditor加入/static目录下，能正常显示，但是出现“请求后台配置项http错误，上传功能将不能正常使用！”（解决在下面，都是自定义上传的，如果需要官方的示例，我也无能为力，没搞出来........）
2.解决问题一后，出现“上传失败”（解决在下面，同上）
默认情况下上传图片时的请求过程：
首先，初始化Ueditor插件时，在ueditor.all.js的大约8200行左右有一个请求配置文件内容的request。请求的是ueditor.config.js中serviceUrl的服务器路径，即请求的是/jsp/controller.jsp文件。他返回的内容是/jsp目录下的config.json文件的内容。如果这里请求错误，前端控制台会打印“请求后台配置项http错误，上传功能将不能正常使用！”的错误。
其次，当我们上传图片时，图片的请求路径、保存的地址都在/jsp目录的下config.json文件中。请求成功时将返回类似如下json数据
{ "state": "SUCCESS", "url": "upload/demo.jpg", "title": "demo.jpg", "original": "demo.jpg" }
这就为我们自定义上传返回提供了思路，也就是下面的步骤。
第一步：下载Ueditor，地址：http://ueditor.baidu.com/build/build_down.php?n=ueditor&v=1_4_3_3-utf8-jsp 完成后将文件夹名改为ueditor，方便一些，然后复制此文件夹到Spring Boot项目的/resources/static目录下。
第二步：修改文件上传配置路径
打开ueditor目录下的ueditor.config.js文件，修改serverUrl路径，未修改情况下，将请求ueditor/jsp/controller.jsp。他返回当前目录的conf.json的内容。我们要模拟出
此内容。
由原来的 serverUrl: URL+"jsp/controller.jsp" 改为我们自己的 serverUrl: "http://localhost:8080/ueditor/"
然后编写comtroller处理请求，后台ueditor如下：（我删除了用不到的视频、涂鸦什么的，只留下了图片的）将/jsp/config.json中的内容复制到字符串中，然后返回即可，注意的是先写String s="";然后在双引号内粘贴，这样会自动将粘贴板中的双引号加入反斜杠。
@RequestMapping(value = "/ueditor") @ResponseBody public String ueditor(HttpServletRequest request, HttpServletResponse response) { String s = "{\n"+ " \"imageActionName\": \"uploadimage\",\n" + " \"imageFieldName\": \"file\", \n" + " \"imageMaxSize\": 2048000, \n" + " \"imageAllowFiles\": [\".png\", \".jpg\", \".jpeg\", \".gif\", \".bmp\"], \n" + " \"imageCompressEnable\": true, \n" + " \"imageCompressBorder\": 1600, \n" + " \"imageInsertAlign\": \"none\", \n" + " \"imageUrlPrefix\": \"\",\n" + " \"imagePathFormat\": \"/ueditor/jsp/upload/image/{yyyy}{mm}{dd}/{time}{rand:6}\" }"; return s; }
这样我们请求过程的第一步完成，接下来我们需要自定义上传图片的处理逻辑。首先，按照官方文档的写法http://fex.baidu.com/ueditor/#qa-customurl，要在使用插件的index.html中的修改action Url，方法如下
<script type="text/javascript">
var ue = UE.getEditor(‘container‘);
UE.Editor.prototype._bkGetActionUrl = UE.Editor.prototype.getActionUrl;
UE.Editor.prototype.getActionUrl = function(action) {
if (action == ‘uploadimage‘ || action == ‘uploadscrawl‘ || action == ‘uploadimage‘) {
return ‘http://localhost:8080/imgUpdate‘; //在这里返回我们实际的上传图片地址
} else {
return this._bkGetActionUrl.call(this, action);
}
}
</script>
其后台的imgUpdate如下：
@RequestMapping(value = "/imgUpdate") @ResponseBody public String imgUpdate(MultipartFile file) { if (file.isEmpty()) { return "error"; } // 获取文件名 String fileName = file.getOriginalFilename(); // 获取文件的后缀名 String suffixName = fileName.substring(fileName.lastIndexOf(".")); // 这里我使用随机字符串来重新命名图片 fileName = Calendar.getInstance().getTimeInMillis() + Randoms.getRandomStringLower(4) + suffixName; // 这里的路径为Nginx的代理路径，这里是/data/images/xxx.png File dest = new File(ConstantL.IMAGE_UPDATE_PATH + fileName); // 检测是否存在目录 if (!dest.getParentFile().exists()) { dest.getParentFile().mkdirs(); } try { file.transferTo(dest); //url的值为图片的实际访问地址 这里我用了Nginx代理，访问的路径是http://localhost/xxx.png String config = "{\"state\": \"SUCCESS\"," + "\"url\": \"" + ConstantL.BASE_URL + fileName + "\"," + "\"title\": \"" + fileName + "\"," + "\"original\": \"" + fileName + "\"}"; return config; } catch (IllegalStateException e) { e.printStackTrace(); } catch (IOException e) { e.printStackTrace(); } return "error"; }
这里返回值是参照文档中的http://fex.baidu.com/ueditor/#dev-request_specification.需要注意的是，mgUpdate方法里面的参数名称一定要与ueditor方法中字符串s中的imageFieldName值相同，都是file，不然会报空指针异常。
这样，应该就可以上传了。
以上是关于百度ueditor能不能上传pdf的主要内容，如果未能解决你的问题，请参考以下文章
请问：百度Ueditor编辑器为啥不能上传图片啊？在ASP中，请求高手指教。