UEditor

UEditor1.4.3实现跨域上传到独立文件服务器,完美解决单文件和多文件上传!

首先去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.1 c.com
127.0.0.1 d.com

保存后在浏览器上访问c、d.com就能访问到本地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">
<html>
<head>
    <title>完整demo</title>
    <meta http-equiv="Content-Type" content="text/html;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>
</head>
<body>
<div>
    <h1>跨域上传</h1>
    <script id="editor" type="text/plain" style="width:1024px;height:500px;"></script>
</div>
<script type="text/javascript">
    //实例化编辑器
    //建议使用工厂方法getEditor创建和引用编辑器实例,如果在某个闭包下引用该编辑器,直接调用UE.getEditor(‘editor‘)就能拿到相关的实例
    var ue = UE.getEditor(‘editor‘, {
        toolbars: [[
                ‘source‘,
                ‘simpleupload‘, //单图上传
                ‘insertimage‘, //多图上传]
                ‘attachment‘, //附件
                ‘scrawl‘, //涂鸦
                ‘wordimage‘, //图片转存
                ‘insertvideo‘//上传你视频
            ]]
    });
</script>
</body>
</html>

最终效果:

接下来打开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;
using System.Web;
using System.IO;
using System.Collections;

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
    {
        get
        {
            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);
        }

时间: 2024-10-14 11:06:17

UEditor的相关文章

百度富文本编辑器ueditor使用总结

最近做的项目用到了ueditor这个东东,但是他的一些配置文档对初次使用者来说很难以理解,故作此总结 1.ueditor 官方地址:http://ueditor.baidu.com/website/index.html 开发文档地址:http://ueditor.baidu.com/website/document.html 下载地址:http://ueditor.baidu.com/website/download.html (这里可选开发版,或MINI版) 2. 从官网上下载完整源码包,解压

解决ueditor中没法动态配置imageurlprefix的方法

修改背景,由于后台图片是上传到挂载的静态资源磁盘中去,前台用独立域名访问 所以在ueditor中显示图片前缀,只能在 "imageUrlPrefix": 中配置域名,配上域名就遇上了麻烦,开发环境,测试环境,生产环境的域名都不一样: 而ueditor的在配置项放在config.json中,如下: 造成的问题就是每次提交版本控制的时候,config.json文件都要忽略提交,并且再三确认是否提交被提交了,提交后就会导致测试环境上传图片后,图片域名前缀显示的是生产环境的域名,图片直接不可显

用ueditor上传图片、文件等到七牛云存储

ueditor上传文件,是用数据流的形式上传的. 而七牛云存储官方文档中,只提供了文件路径上传的方式. 但是,仅仅是在官方文档中写了这一种方式. 事实上,利用VS的对象管理器,打开Qiniu的dll,我们可以看到以下东西: 其实Qiniu提供的SDK中,是可以利用文件流上传文件的. 所以,根据官方文档提供的案例,我们可以将上传改写成下面的样子: /// <summary> /// 上传文件 /// </summary> /// <param name="key&qu

UEditor的JSP配置说明

?JSP 使用说明 1 背景 UEditor 1.4.0 版本对之前的配置方式进行了简化,具体请参见:后端请求规范,为了适应这次升级,JAVA 后台也进行了重写,跟之前的版本差别较大,升级的用户注意阅读本文档. 本文档介绍 UEditor JAVA 后台的部署和配置说明. 注意:本文档仅适用于1.4.0之后的Java版UEditor. 2 先决条件 JDK 1.6+ Apache Tomcat 6.0+ UEditor 1.4.0+ 3 示例环境 3.1 软件版本信息 JDK 6u45 Tomc

.NET中应用Ueditor(富文本编辑)的配置和使用

一.Ueditor的下载 1.百度编辑器下载地址:http://ueditor.baidu.com/website/download.html 2.下载完整源码包,解压到任意目录,解压后的源码目录结构如下所示: 3.编辑器展示: 二.Ueditor的使用 1.添加到项目中如图所示: 2.新建项目中进行引用 1 <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="TestUeditor.a

UEditor 添加在线管理图片删除功能

第一,需要添加一个 php 文件来实现删除功能,文件添加到: ueditor\php\action_delete.php 代码内容: <?php   /*---------------------------  * wang  *zhibeiwang.blog.51cto.com  * 2017-08-10  * action_delete.php  * 删除 Ueditor 目录下的文件  *---------------------------*/   try {     //获取路径   

php如何引入百度Ueditor富文本编辑器

文本编辑器插件内容丰富,比起传统的textarea标签输入要好用很多,看看如何在页面实现引入吧 1.下载适合的资源包(可以去官网下载适合的版本),我是php引入 2.下载后解压放到一个位置.(我用的是TP框架,所以我放在了我的指定公共文件夹Pbulic下) 3.在页面中引入 首先在head标签里写引入资源包的路径,路径要写自己存放资源包的路径 <script type="text/javascript" src="__PUBLIC__/ueditor/ueditor.c

ueditor编辑器使用总结

ueditor使用小结 一.简介 ueditor是百度编辑器,官网地址:http://ueditor.baidu.com/website/ 完整的功能演示,可以参考:http://ueditor.baidu.com/website/onlinedemo.html 为了方便开发学习,我们下载它的完整版和.net版. ueditor_release_ueditor1_4_3_1-src.zip ueditor_release_ueditor1_4_3_1-gbk-net.zip 二.如何引入uedi

Ueditor中代码的高亮和背景在前端页面的实现

首先废话就不多说,这个富文本编辑器的下载和js等基本文件的导入略. 我的最终目标是这样的,我们在页面中的富文本框中输入代码,希望它能够被后台接受.存入数据库,当通过服务器将这些代码再一次显示在前台的页面上的时候,我们希望所呈现的是如下的情况: 就是说需要对代码的背景和高亮的部分的样式也进行保存.我的解决过程是这样的(假设在demo.html中进行输入,在demo.php中进行处理和呈现): 1. 首先在网上查找相关信息,发现需要第三方插件,而这第三方插件就在我们的ueditor的下载包中,ued