ueditor跨域及路径问题

ueditor跨域及路径问题

之所以写这篇文章，是因为在维护一个老项目的时候；ueditor上传单张图片的时候，出现上传成功，但是图片显示不出来以及出现上传失败的弹出窗，后面分析总结出以下三个问题：

1. iframe跨域

2. imageUrlPrefix图片访问路径问题

3.IE兼容问题JSON.parse()

解决方案

在修改服务端的config.json，controller.jsp

1. 需要你在jsp文件下面的controller.jsp文件里面加上这两句话

      response.setHeader("Access-Control-Allow-Origin", "*");
      response.setHeader("Access-Control-Allow-Headers", "X-Requested-With,X_Requested_With");
   

   

2. config.json

   

在客户端解决上传图片成功，图片不显示问题

1. 我们需要在ueditor.all.js文件里面修改

   • 将原先的这三句代码注释掉

     domUtils.on(iframe, 'load', callback);
     form.action = utils.formatUrl(imageActionUrl + (imageActionUrl.indexOf('?') == -1 ? '?' : '&') + params);
     form.submit();
     

   • 在后面添加上这些代码

     var formdata = new FormData(form);
     var arr, reg = new RegExp("(^| )_token=([^;]*)(;|$)");
     
     var myForm = document.getElementById("myForm");
     var xhr = new XMLHttpRequest();
     xhr.open("POST", me.getOpt('serverUrl') + '?action=uploadimage', true);
     xhr.onreadystatechange = function () {
         if (xhr.readyState === 4)
             if ((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304)
                 alert(xhr.responseText);
     }
     xhr.send(formdata);
     
     xhr.onreadystatechange = function () {
         if (xhr.readyState == 4) {
             //IE兼容问题JSON.parse
             // var response = JSON.parse(xhr.responseText);
             var response = strToJson(xhr.responseText);
             if (response.state == 'SUCCESS') {
                 loader = me.document.getElementById(loadingId);
                 loader.setAttribute('src', me.getOpt('serverUrl') + response.url);
                 loader.setAttribute('_src', me.getOpt('serverUrl') + response.url);
                 loader.setAttribute('title', response.title || '');
                 loader.setAttribute('alt', response.original || '');
                 loader.removeAttribute('id');
                 domUtils.removeClasses(loader, 'loadingclass');
             }
         }
     }
     
     function strToJson(str) {
         var json = eval('(' + str + ')');
         return json;
     }
     

以上这些问题处理完便可以上传图片了，并且也能在编辑器里面显示图片

最后有一个问题就是ie的兼容，因为这个项目是需要能在ie上跑的，刚刚最后加上去代码中有一个方法strToJson()这个就是处理ie不能解析JSON.parse()的方法

以上就是我遇到的问题

欢迎交流

本文使用 mdnice 排版