Ueditor1.4.3实现跨域上传到独立文件服务器，完美解决单文件和多文件上传
再写配置方法之前先吐槽一下网上的各种教程，TM没一个有卵用，一群傻屌不会写就别写，写了就要负责。
百度google搜了半天，全是配置什么document.domain，根域名什么的，我只想对你说：
好了，talk is cheap show me the code，言归正传：
首先去ue官网下载1.43版 .net版本，解压之后，把demo文件夹改成web，把net那个文件夹拷贝出来放到web外面，如图：
这样就把编辑器的静态文件和动态文件分离了，动态部分放到文件服务器上，静态部分集成到我们的网站上。
下面我就用c.com绑定到web目录，d.com绑定到net目录(a、b.com我在测试的时候用了)。先在本地IIS创建两个站点，如图设置：
接下来要设置Hosts才能访问，这是模拟的绑定域名，打开C:\Windows\System32\drivers\etc找到hosts文件，用记事本打开在文件末尾增加两行：
127.0.0.127.0.0.1
保存后在浏览器上访问就能访问到本地iis了，如果不能保存就先邮件hosts文件添加user用户权限设置为可修改就能保存了。
接下来打开a.com下面的index.html文件，把它里面的代码该删的删一下，工具栏重新设置一下保留用得到上传功能的：
&!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd"&
&title&完整demo&/title&
&meta http-equiv="Content-Type" content="text/charset=utf-8"/&
&script type="text/javascript" charset="utf-8" src="/ueditor.config.js"&&/script&
&script type="text/javascript" charset="utf-8" src="/ueditor.all.js"& &/script&
&!--建议手动加在语言，避免在ie下有时因为加载语言失败导致编辑器加载失败--&
&!--这里加载的语言文件会覆盖你在配置项目里添加的语言类型，比如你在配置项目里配置的是英文，这里加载的中文，那最后就是中文--&
&script type="text/javascript" charset="utf-8" src="/lang/zh-cn/zh-cn.js"&&/script&
&h1&跨域上传&/h1&
&script id="editor" type="text/plain" style="width:1024height:500"&&/script&
&script type="text/javascript"&
//实例化编辑器
//建议使用工厂方法getEditor创建和引用编辑器实例，如果在某个闭包下引用该编辑器，直接调用UE.getEditor('editor')就能拿到相关的实例
var ue = UE.getEditor('editor', {
toolbars: [[
'simpleupload', //单图上传
'insertimage', //多图上传]
'attachment', //附件
'scrawl', //涂鸦
'wordimage', //图片转存
'insertvideo'//上传你视频
最终效果：
接下来打开c.com下面的ueditor.config.js， 找到：, serverUrl: URL + "net/controller.ashx"改成：, serverUrl: "http://d.com/controller.ashx"&
接下来你打开浏览器调试，刷新页面就看得到请求d.com下面的controller.ashx获取上传参数了。【后面测试尽量用ctrl+f5刷新页面测试，不行就试试清除缓存】
现在你可以测试一下上传，次数单文件上传是能上传成功的，d.com下面已经有文件了，但是不能返回地址；多文件上传和涂鸦等上传失败，要报错：
XMLHttpRequest cannot load http://d.com/controller.ashx?action=uploadimage&encode=utf-8. Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://c.com' is therefore not allowed access.
这里有必要先提一下，ue的单文件上传是form提交到iframe，然后检测iframe里面的内容来返回结果，官方已经明确说明了单文件上传不能实现跨域上传，就是因为跨域的iframe是获取不到iframe里面的html代码的，所以现在不能获得上传地址，后面我有办法解决。而多文件上传和涂鸦这些用的是flash上传或者html5上传，这个就要用跨域的方法来解决，接下来先解决这个问题。
进入b.com目录下面。打开config.json，搜索 UrlPrefix": "/ueditor/net/",& 全部改成 UrlPrefix": "http:/d.com/",& 这是图片上传成功后的地址前缀，让它返回http://d.com/xxxx/xx/jpg。
接下来根据ue官方的文档是要在文件服务器上的controller.ashx里面添加header: Access-Control-Allow-Origin等，根据我的测试，卵用都没得！！要在iis上添加才行，别问我为什么，我也不晓得。
好了，现在来测试一下多图上传，成功了有木有！！涂鸦也能保存了！
不过现在单文件上传还是不能跨域，因为他是iframe的方式，要实现跨域还得费电周章。
好了，实现单文件跨域上传。首先要搞懂他的原理，它是提交到iframe去上传，然后监控iframe加载完成后js获取iframe里面的内容也就是json结果来得到图片上传结果。而跨域上传iframe里面的页面和当前页面不是同一个域名就获取不到json了，官方说暂时不支持，其实so easy，用传统的代理页面来解决，就是文件服务器上传成功后，不直接显示结果，而是跳转到c.com下面来的result.ashx页面来，把结果传递到这个页面上，再输出来，这样iframe就在同一个域名上了。
首先在c.com下面添加result.ashx：
&%@ WebHandler Language="C#" Class="UEditorHandler" %&
using System.W
using System.IO;
using System.C
public class UEditorHandler : IHttpHandler
public void ProcessRequest(HttpContext context)
var result=context.Request["result"];
//当然这里最好判断一下result是否安全，不要接收到内容就显示这样会被人利用。
if(result!=null)
context.Response.Write(result.ToString());
public bool IsReusable
return false;
因为只有单图上传也就是简单文件上传要用iframe方式所以我们要判断一下，只有简单文件上传才用这种方式。打开ueditor.all.js或者ueditor.all.min.js你页面上调用哪个就打开哪个，搜索&input color: #ff0000">&input type="hidden" name="issimpleupload" value="true" /&&这样上传后我们好通过获取issimpleupload来判断是不是简单文件上传。
初始化编辑器页面你调用哪个就加哪个页面，两个加上也成。
然后改d.com的处理文件，app_code里面的Handler.cs打开，第28行的大括号里面加上判断：
if (String.IsNullOrWhiteSpace(jsonpCallback))
var issimple = Request["IsSimpleUpload"];
if (issimple != null && issimple.ToString()=="true")
Response.Redirect("http://c.com/result.ashx?result=" + json); //把json传递到c.com下面去呈现结果。
Response.AddHeader("Content-Type", "text/plain");
Response.Write(json);
到这里就特么大功告成了！！！
ue真心好用啊，尤其是针对个人站长，百度搜图，搜音乐，涂鸦，粘贴内容直接下载远程图片，文章内容分页等功能就是为站长量身订做的。
唯一的遗憾就是没有内容分页设置分页标题，不过我已经把分页标题扩展上去了。
由于我们的项目有单独处理图片的项目,所以在用ueditor上传图片的时候就涉及到了跨域问题.在网上找了很多文章,普遍都是在页面和internal.js中加入根路径的解决方法.本人用的是1.2.6.1_jsp开发板本,实验了下这种方式不管用.最终是通过配置ueditor.config.js中的提交上传页面的路径来解决的.代码如下//图片上传配置区,imageU ...
为什么需要跨域呢?这是因为我们一般的请求都是使用xhr的,但是它只能调用同一个域里面的接口,有时候,我们想要在自己的站点中调用其他站点的接口,这时候就要用到跨域了.其实,跨域并不难,我们可以通过JavaScript的动态脚本加载技术来实现.需要注意的是,跨域是需要后台配合的.我们需要约定了一个函数(函数名以参数的形式传到后台),前台使用这个函数进行解析后台返 ...
我们都知道,xhr(XMLHttpRequest)是不允许跨域的.而jQuery的ajax方法是基于xhr的,所以,直接使用它也是无法跨域的.一般的,我们是如下使用$.ajax方法的: $.ajax({ type : &GET&, url : &the path of server&, dataType : &quot ...
分两步提交页面用户输入的数据:第一步,利用form上传文件和一部分数据,第二步,上传文件成功得到文件id,再一次连同文件id和页面其他信息一同提交后台(也就是先上传一个文件,然后再利用文件id绑定到具体的“用户”上). 首先form应该这样写 &form method=&& action=&& enctype=& ...
什么是跨域 JSONP proxy代理 cors xdr 由于浏览器同源策略,凡是发送请求url的协议.域名.端口三者之间任意一与当前页面地址不同即为跨域.具体可以查看下表(来源) JSONP 这种方式主要是通过动态插入一个script标签.浏览器对script的资源引用没有同源限制,同时资源加载到页面后会立即执行(没有阻塞的情况下). 1 &scri ...
跨域问题来源于JavaScript的同源策略,即只有 协议+主机名+端口号 (如存在)相同,则允许相互访问.也就是说JavaScript只能访问和操作自己域下的资源,不能访问和操作其他域下的资源.
在以前,前端和后端混杂在一起, 比如JavaScript直接调用同系统里面的一个Httphandler,就不存在跨域的问题,但是随着现代的这种多种 ...
© CopyRight
Inc All Rights Reserved.
管理员邮箱: info @1847人阅读
经过几天的研究熟悉了百度Ueditor 富文本编辑器的使用，为了防止自己忘记特记录如下：
1、从官网下载1.4.3最新版 /website/download.html。
& & &我下载的是1.4.3 &jsp的开发版本，当然也可以下载min版不过min版的配置我就不太清楚了。
2、将下载下来的zip解压后重命名为ueditor 之后将文件添加到项目的webroot下面。
& & &将该目录中 & &&lib文件夹下的jar添加到web/INF下的lib中 。
3、在jsp中导入配配置文件
&&scripttype=&text/javascript&charset=&utf-8&src=&ueditor/ueditor.config.js&&&/script&
&&scripttype=&text/javascript&charset=&utf-8&src=&ueditor/ueditor.all.js&&&/script&
&&linkrel=&stylesheet&type=&text/css&href=&ueditor/themes/default/css/ueditor.css&/&
&注：我的jsp页面与ueditor处于同一级目录。
4、在jsp页面需要富文本编辑器的地方假如如下代码
&&scripttype=&text/plain&id=&myEditor&name=&news.content&&&/script&
&&scripttype=&text/javascript&&
& & & & & & var editor =
new UE.ui.Editor({
& & & & & & & & & & & & & & & & & & & & & & initialFrameHeight:380&
&& & & & & & & & & & & & & & & & & & & & & &
&& & & & & & & & & & & & & & & & & & & & & & });
& & & & & & editor.render(&myEditor&);
& &/script&
上面代码包含了如何指定ueditor高度的方法 {initialFrameHeight:380 }。
5、修改ueditor.config.js中的URL
& &var URL = window.UEDITOR_HOME_URL || getUEBasePath();
& &var URL =
&/TLWXP/ueditor/&;
6、个性化编辑器的toolbar&
& &首先找到
& &window.UEDITOR_CONFIG
& &修改该栏目下的 toolbars
& &具体参数对应的工具含义可参考官方文档&http://fex-team.github.io/ueditor/#start-toolbar
7、如果使用了图片上传的功能则要修改 ueditor/jsp/config.json中关于图片路径的配置
& 如需修改其他内容可以继续往下修改对应的项目。
&&相关文章推荐
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：18598次
排名：千里之外
原创：13篇
(1)(1)(1)(1)(1)(1)(1)(3)(1)(1)(3)(1)Ueditor 1.4.3 Net上传图片文件配置
Ueditor 1.4.3 Net上传图片文件配置
发布时间： 9:59:03
编辑：www.fx114.net
本篇文章主要介绍了"Ueditor 1.4.3 Net上传图片文件配置"，主要涉及到Ueditor 1.4.3 Net上传图片文件配置方面的内容，对于Ueditor 1.4.3 Net上传图片文件配置感兴趣的同学可以参考一下。
一、不得利用本站危害国家安全、泄露国家秘密，不得侵犯国家社会集体的和公民的合法权益，不得利用本站制作、复制和传播不法有害信息！
二、互相尊重，对自己的言论和行为负责。
本文标题：
本页链接：百度富文本编辑器地址：/website/index.html1.UEditor上传目录2.在ueditor.config.js中配置serverUrl: "/resources/plugin/ueditor"3.后台配置访问路径@RequestMapping("resources/plugin/ueditor")public void baiduEdit(HttpServletRequest request, HttpServletResponse response) {try {request.setCharacterEncoding("utf-8");response.setHeader("Content-Type", "text/html");String rootPath = request.getServletContext().getRealPath("/");logger.debug("================&{}", rootPath);//针对配置百度上传附件读取配置文件ActionMap.mapping.put("config", ActionMap.CONFIG);//上传文件ActionMap.mapping.put("uploadfile", ActionMap.UPLOAD_FILE);ActionEnter actionEnter = new ActionEnter(request, rootPath);response.getWriter().write(actionEnter.exec());} catch (Exception e) {e.printStackTrace();}}配置成功后，可以启动项目, 执行urlhttp://localhost:8080/longchoudai/resources/plugin/ueditor?action=config可以看到你配在config.json中的Json数据4.上传附件时候修改原百度BinaryUploader.java 在目录com.baidu.ueditor.upload下面public class BinaryUploader {private static Logger logger = LogManager.getLogger();/** * 保存文件 * @author lance * 日 下午2:26:49 */public static final State save(HttpServletRequest request, Map&String, Object& conf) {boolean isAjaxUpload = request.getHeader("X_Requested_With") !=if (!ServletFileUpload.isMultipartContent(request)) {return new BaseState(false, 5);}ServletFileUpload upload = new ServletFileUpload(new DiskFileItemFactory());if (isAjaxUpload) {upload.setHeaderEncoding("UTF-8");}try {String savePath = request.getServletContext().getRealPath("/")+"/attached/file/"+JodaTimeUtils.dateToString(new Date(), null)+"/";String saveUrl
= request.getContextPath() + "/attached/file/";//上传附件目录Path path = Paths.get(savePath);if(!Files.isDirectory(path)){try {Files.createDirectories(path);} catch (IOException e) {logger.error("百度上传附件创建上传文件夹错误： {}", e.getMessage());}}
//重新命名文件名字String newFileName = "", fileExt = "", fileName = "";CommonsMultipartResolver multipartResolver=new CommonsMultipartResolver(request.getSession().getServletContext());//检查form中是否有enctype="multipart/form-data"if(multipartResolver.isMultipart(request)) {//将request变成多部分request
MultipartHttpServletRequest multiRequest=(MultipartHttpServletRequest)
//获取multiRequest 中所有的文件名
Iterator&String&it=multiRequest.getFileNames();
//遍历文件
while(it.hasNext()) {
MultipartFile file=multiRequest.getFile(it.next().toString());
if(file != null){
SimpleDateFormat df = new SimpleDateFormat("yyyyMMddHHmmss");
fileName = file.getOriginalFilename();
fileExt = fileName.substring(fileName.lastIndexOf(".")).toLowerCase();
//新文件名称newFileName = savePath + df.format(new Date()) + "_" + new Random().nextInt(1000) + fileEsaveUrl = saveUrl + df.format(new Date()) + "_" + new Random().nextInt(1000) + fileEif (!validType(fileExt, (String[])conf.get("allowFiles"))) {
return new BaseState(false, 8);
}try {//上传文件file.transferTo(new File(newFileName));} catch (IllegalStateException | IOException e) {logger.error("百度上传附件保存文件错误： {}", e.getMessage());}
State storageState = new BaseState(Boolean.TRUE);if (storageState.isSuccess()) {storageState.putInfo("url", PathFormat.format(saveUrl));storageState.putInfo("type", fileExt);storageState.putInfo("original", fileName);}return storageS} catch (Exception e) {logger.error("百度上传附件文件错误： {}", e.getMessage());}return new BaseState(false, 4);}private static boolean validType(String type, String[] allowTypes) {List&String& list = Arrays.asList(allowTypes);return list.contains(type);}}
大小: 29.2 KB
大小: 46.6 KB
最新教程周点击榜
微信扫一扫在写配置方法之前先吐槽一下网上的各种教程，TM没一个有卵用，一群傻屌不会写就别写，写了就要负责。
百度google搜了半天，全是配置什么document.domain，根域名什么的，我只想对你说：
好了，talk is cheap show me the code，言归正传：
首先去ue官网下载1.43版 .net版本，解压之后，把demo文件夹改成web，把net那个文件夹拷贝出来放到web外面，如图：
这样就把编辑器的静态文件和动态文件分离了，动态部分放到文件服务器上，静态部分集成到我们的网站上。
下面我就用c.com绑定到web目录，d.com绑定到net目录(a、b.com我在测试的时候用了)。先在本地IIS创建两个站点，如图设置：
接下来要设置Hosts才能访问，这是模拟的绑定域名，打开C:\Windows\System32\drivers\etc找到hosts文件，用记事本打开在文件末尾增加两行：
127.0.0.127.0.0.1
保存后在浏览器上访问c、d.com就能访问到本地iis了，如果不能保存就先右键hosts文件添加user用户权限设置为可修改就能保存了。
接下来打开c.com下面的index.html文件，把它里面的代码该删的删一下，工具栏重新设置一下保留用得到上传功能的：
&!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd"&
&title&完整demo&/title&
&meta http-equiv="Content-Type" content="text/charset=utf-8"/&
&script type="text/javascript" charset="utf-8" src="/ueditor.config.js"&&/script&
&script type="text/javascript" charset="utf-8" src="/ueditor.all.js"& &/script&
&!--建议手动加在语言，避免在ie下有时因为加载语言失败导致编辑器加载失败--&
&!--这里加载的语言文件会覆盖你在配置项目里添加的语言类型，比如你在配置项目里配置的是英文，这里加载的中文，那最后就是中文--&
&script type="text/javascript" charset="utf-8" src="/lang/zh-cn/zh-cn.js"&&/script&
&h1&跨域上传&/h1&
&script id="editor" type="text/plain" style="width:1024height:500"&&/script&
&script type="text/javascript"&
//实例化编辑器
//建议使用工厂方法getEditor创建和引用编辑器实例，如果在某个闭包下引用该编辑器，直接调用UE.getEditor('editor')就能拿到相关的实例
var ue = UE.getEditor('editor', {
toolbars: [[
'simpleupload', //单图上传
'insertimage', //多图上传]
'attachment', //附件
'scrawl', //涂鸦
'wordimage', //图片转存
'insertvideo'//上传你视频
最终效果：
接下来打开c.com下面的ueditor.config.js， 找到：, serverUrl: URL + "net/controller.ashx"改成：, serverUrl: "http://d.com/controller.ashx"&
接下来你打开浏览器调试，刷新页面就看得到请求d.com下面的controller.ashx获取上传参数了。【后面测试尽量用ctrl+f5刷新页面测试，不行就试试清除缓存】
现在你可以测试一下上传，此时单文件上传是能上传成功的，d.com下面已经有文件了，但是不能返回地址；多文件上传和涂鸦等上传失败，要报错：
XMLHttpRequest cannot load http://d.com/controller.ashx?action=uploadimage&encode=utf-8. Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://c.com' is therefore not allowed access.
这里有必要先提一下，ue的单文件上传是form提交到iframe，然后检测iframe里面的内容来返回结果，官方已经明确说明了单文件上传不能实现跨域上传，就是因为跨域的iframe是获取不到iframe里面的html代码的，所以现在不能获得上传地址，后面我有办法解决。而多文件上传和涂鸦这些用的是flash上传或者html5上传，这个就要用跨域的方法来解决，接下来先解决这个问题。
进入d.com目录下面。打开config.json，搜索 UrlPrefix": "/ueditor/net/",& 全部改成 UrlPrefix": "http:/d.com/",& 这是图片上传成功后的地址前缀，让它返回http://d.com/xxxx/xx/jpg。
接下来根据ue官方的文档是要在文件服务器上的controller.ashx里面添加header: Access-Control-Allow-Origin等，根据我的测试，卵用都没得！！要在iis上添加才行，别问我为什么，我也不晓得。
好了，现在来测试一下多图上传，成功了有木有！！涂鸦也能保存了！
不过现在单文件上传还是不能跨域，因为他是提交到iframe的方式，要实现跨域还得费点周章。
好了，实现单文件跨域上传。首先要搞懂它的原理，它是提交到iframe去上传，然后监控iframe加载完成后js获取iframe里面的内容也就是json结果来得到图片上传结果。而跨域上传iframe里面的页面和当前页面不是同一个域名就获取不到json了，官方说暂时不支持，其实so easy，用传统的代理页面来解决，就是文件服务器上传成功后，不直接显示结果，而是跳转到c.com下面来的result.ashx页面来，把结果传递到这个页面上，再输出来，这样iframe就在同一个域名上了，js就能直接获取iframe里面的内容了。
首先在c.com下面添加result.ashx：
&%@ WebHandler Language="C#" Class="UEditorHandler" %&
using System.W
using System.IO;
using System.C
public class UEditorHandler : IHttpHandler
public void ProcessRequest(HttpContext context)
var result=context.Request["result"];
//当然这里最好判断一下result是否安全，不要接收到内容就显示这样会被人利用。
if(result!=null)
context.Response.Write(result.ToString());
public bool IsReusable
return false;
因为只有单图上传（也就是简单文件上传）要用iframe方式，所以我们要判断一下，只有简单文件上传才用这种方式。打开ueditor.all.js或者ueditor.all.min.js你页面上调用哪个就打开哪个，搜索&input id="edui_input_& 在&/form&之前加上：&input type="hidden" name="issimpleupload" value="true" /&&这样上传后我们好通过获取issimpleupload来判断是不是简单文件上传。
初始化编辑器页面你调用哪个就加哪个页面，两个加上也成。
然后改d.com的处理文件：app_code里面的Handler.cs打开，第28行的大括号里面加上判断：
if (String.IsNullOrWhiteSpace(jsonpCallback))
var issimple = Request["IsSimpleUpload"];
if (issimple != null && issimple.ToString()=="true")
Response.Redirect("http://c.com/result.ashx?result=" + json); //把json传递到c.com下面去呈现结果。
Response.AddHeader("Content-Type", "text/plain");
Response.Write(json);
到这里就特么大功告成了！！！
ue真心好用啊，尤其是针对个人站长，百度搜图，搜音乐，涂鸦，粘贴内容直接下载远程图片，文章内容分页等功能就是为站长量身订做的。
唯一的遗憾就是没有内容分页设置分页标题，不过我已经把分页标题扩展上去了。
阅读(...) 评论()}