UEditor单图上传跨域问题解决方案

UEditor

UEditor是百度团队提供的富文本编辑器

git地址为:https://github.com/fex-team/ueditor

在最近的项目中使用了该插件作为项目的富文本编辑器

由于种种原因项目需要采用前后分离的方式,所以会导致该插件的单图上传功能出现跨域问题(CORB)

官方对于该问题给出的答复为:

由于时间关系来不及改换其他的富文本编辑器,所以在源码中进行了魔改

用自己的方式来解决了这一问题,发挥想象力,故发文分享

代码实现

首先我们需要在三万三千行代码中找到原本的单图上传部分的代码,在 ueditor.all.js 文件中

我们可以在代码编辑器中搜索 simpleupload

如上图所示

然后找到上传图片的部分代码

然后把插件为 input 绑定的事件注释掉

在该代码的后面添加以下代码:

　　　　 // 单图上传

      input.onchange = function(){

        if (!input.value) return;

        var loadingId = "loading_" + (+new Date()).toString(36);

        var params =

          utils.serializeParam(me.queryCommandValue("serverparam")) || "";

        var imageActionUrl = me.getActionUrl(me.getOpt("imageActionName"));

        var allowFiles = me.getOpt("imageAllowFiles");

        me.focus();

        me.execCommand(

          "inserthtml",

          '<img class="loadingclass" id="' +

          loadingId +

          '" src="' +

          me.options.themePath +

          me.options.theme +

          '/images/spacer.gif">'

        );

        /* 判断后端配置是否没有加载成功 */

        if (!me.getOpt("imageActionName")) {

          errorHandler(me.getLang("autoupload.errorLoadConfig"));

          return;

        }

        // 判断文件格式是否错误

        var filename = input.value,

          fileext = filename ? filename.substr(filename.lastIndexOf(".")) : "";

        if (

          !fileext ||

          (allowFiles &&

            (allowFiles.join("") + ".").indexOf(fileext.toLowerCase() + ".") ==

            -1)

        ) {

          showErrorLoader(me.getLang("simpleupload.exceedTypeError"));

          return;

        }

        var formData = new FormData()

        formData.append('upfile', input.files[0]);

        // 替换你的URL

        $.ajax('你的服务器上传路径',{

          data: formData,

          processData:false,

          contentType: false,

          type:"post",

          success:function(data){

            console.log(data)

            try{

            var link,

              json,

              loader;

            json = JSON.parse(data);

            link = '服务器存放图片的路径' + json.url;if (json.state == "SUCCESS" && json.url) {

              loader = me.document.getElementById(loadingId);

              domUtils.removeClasses(loader, "loadingclass");

              loader.setAttribute("src", link);

              loader.setAttribute("_src", link);

              loader.setAttribute("alt", json.original || "");

              loader.removeAttribute("id");

              me.fireEvent("contentchange");

            } else {

              showErrorLoader && showErrorLoader(json.state);

            }

          } catch (er) {

            console.log(er)

            showErrorLoader &&

            showErrorLoader(me.getLang("simpleupload.loadError"));

          }

          }

        })

      }

为了方便使用了jquery的Ajax来进行图片上传

需要注意的是:

 　　　　　　processData:false,

          contentType: false,

processData这里是防止Ajax将图片文件转换为字符串上传
contentType是让Ajax不要添加contentType头,以便浏览器自动添加文件边界

具体原因点这里

结语

最后说一句: "珍爱生命远离,不维护插件"

希望能对大家有所帮助

UEditor单图上传跨域问题解决方案的相关教程结束。