在线编辑器跨域处理

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

在线编辑器跨域处理

推荐阅读