zoukankan      html  css  js  c++  java
  • 在线编辑器跨域处理

    在线编辑器如KindEditor、UEditor,在不跨域的情况下功能正常,但在跨域的场景下,图片上传、附件上传等会有问题。

    这里所说的跨域,是指引用编辑器的页面所在域与编辑器所在域不是同一个。存在跨域的场景如,a.example.com和b.example.com中某些页面都使用了在线编辑器,但这些页面中都使用javascript强制将文档的域改为了example.com,这样就使得页面与编辑器不在同一个域。

    跨域的情况下,KindEditor中图片虽能上传到服务器,但无法返回浏览器路径以显示到编辑器中。这是因为图片上传后返回的结果和页面不是同一个域,造成页面上的编辑器js脚本无法访问返回的结果。

    解决这个问题的方法是,在图片上传服务端修改返回的结果添加document.domain='example.com'这样的js脚本,使返回的结果和页面是同一个域。

    具体解决办法,不同的编辑器有所不同。KindEditor中需要输入Html代码,在pre标签中包裹json返回数据,在script标签中输出document.domain=**代码:

     1 public void Upload()
     2         {
     3     //执行上传和文件保存
     4 string fileName="*****.png";
     5             Response.Write("<html>");
     6             Response.Write("<head>");
     7             Response.Write("<script>document.domain='lhtry.com'</script>");
     8             Response.Write("</head>");
     9             Response.Write("<body>");
    10             Response.Write("<pre>");
    11             Response.Write("{"error":0,"url":""+fileName+""}");
    12             Response.Write("</pre>");
    13             Response.Write("</body>");
    14             Response.Write("<html>");
    15             Response.Flush();
    16         }

    在UEditor中,就需要修改UEditor上传服务端代码中的WriteJson方法如下:

     1 protected new void WriteJson(object response)
     2     {
     3         string jsonpCallback = Request["callback"],
     4             json = JsonConvert.SerializeObject(response);
     5         if (String.IsNullOrWhiteSpace(jsonpCallback))
     6         {
     7             Response.Write("<script>document.domain='lhtry.com'</script>");//添加域重置js代码
     8             Response.Write(json);
     9         }
    10         else
    11         {
    12             Response.AddHeader("Content-Type", "application/javascript");
    13             Response.Write(String.Format("{0}({1});", jsonpCallback, json));
    14         }
    15         Response.End();
    16     }

    UEditor中图片、附件等的上传管理功能在跨域下都会有问题,需要逐个去处理。

  • 相关阅读:
    monkeyrunner 进行多设备UI测试
    python Pool并行执行
    python 字符串函数
    python Map()和reduce()函数
    python re模块使用
    3.6 C++继承机制下的构造函数
    3.5 C++间接继承
    3.4 C++名字隐藏
    3.3 C++改变基类成员在派生类中的访问属性
    3.2 C++继承方式
  • 原文地址:https://www.cnblogs.com/liuhua4451/p/5304285.html
Copyright © 2011-2022 走看看