百度编辑器ueditor子域跨域的解决方案

风一样的男孩

ueditor是一款非常棒的编辑器, 最近项目里碰到一个情况
一般会把ueditor放在根目录下, 然后全站调用, 但是项目稍微大一点的就会存在多子域. 这里ueditor处理的不够细致了.

如果载入ueditor的时候, 访问地址和当前页面地址子域不同, 编辑器的很多功能都是不能用的, 因为iframe跨域了. 这个问题很好解决.
在当前页面加上

document.domain = ‘根域’;

然后在  ueditor\dialogs\internal.js  里也加上

document.domain = ‘根域’;

这样就能解决比如上传图片之类弹出式功能的跨域问题

但是这样是不够的, 如果仔细检查会发现ueditor在IE下创建的时候就会报错, 整个编辑器的ui是会初始化成功, 但是编辑器是不能用的, 获取绑定对象的高度也会失败. 原因还是iframe跨域, 具体表现在 editor_all.js的
Editor.prototype.render()  内
this._setup( container.firstChild.contentWindow.document )   这一行, 因为iframe虽然创建了, 但是跨域, 所以获取不到contentWindow的任意子元素
所以创建iframe的时候可以这样改

1. container.innerHTML = ‘<iframe id=”‘ + ‘baidu_editor_’ + this.uid + ‘”‘ + ‘width=”100%” height=”100%” scroll=”no” frameborder=”0″ src=”javascript:void((function(){var d=document;d.open();d.domain=\’根域\’;\d.write(\’\’);d.close()})())”>& lt;/iframe>’;

复制代码

然后在  Editor.prototype._setup()  内
doc.open()  后加上  document.domain = ‘根域’;
因为open后domain会被重置, 我是加在  this.document = doc;  下的

最后图片上传的时候会存在flash跨域问题, 大家可以用这个crossdomain.xml代码来解决, 代码如下

1. <?xml version=”1.0″ encoding=”UTF-8″?>
   
2. <!DOCTYPE cross-domain-policy SYSTEM “http://www.macromedia.com/xml/dtds/cross-domain-policy.dtd” >
   
3. <cross-domain-policy>
   
4. <site-control permitted-cross-domain-policies=”all” />
   
5. <allow-access-from domain=”*.根域”/>
   
6. <allow-access-from domain=”根域”/>
   
7. <allow-http-request-headers-from domain=”*.根域” headers=”*”/>
   
8. <allow-http-request-headers-from domain=”根域” headers=”*”/>
   
9. </cross-domain-policy>

复制代码

记得把xml放在根目录下

到这里ueditor跨子域的问题就解决了, 什么是根域请查看这里:
至于ueditor跨全域如何解决就不要问了, 这类情况应该果断的把ueditor复制一份放到本域下!