• 在线编辑器跨域处理


    在线编辑器如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中图片、附件等的上传管理功能在跨域下都会有问题,需要逐个去处理。

  • 相关阅读:
    let 和 const
    关于AVR单片机熔丝位的设置和拯救方法大全 AVR单片机熔丝位的设置和详细的拯救方法
    myeclipse出现 “couldn't open the editors 解决方案
    20不努力,30做助理(转载)
    强大的WMIC
    怎样设计一个好的PCB
    查看电脑硬件信息
    一天总结
    正式写技术博客,记录一下心情
    jquery 可选择可编辑的文本框插件
  • 原文地址:https://www.cnblogs.com/liuhua4451/p/5304285.html
Copyright © 2020-2023  润新知