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