UEditor文件上传前后端分离架构的适配修改

        UEditor是由百度web前端研发部开发所见即所得富文本web编辑器，具有轻量，可定制，注重用户体验等特点，开源基于MIT协议，允许自由使用和修改代码。编辑器功能还算齐全，没有太多毛病。

        官方地址：GitHub - fex-team/ueditor: rich text 富文本编辑器

        下载地址：https://github.com/fex-team/ueditor/releases

        稍微有点不足的地方就是这个编辑器默认的场景都是前后端部署在一起的情况。编辑器中涉及到文件上传的部分默认是直接调用的后台代码的形式完成功能。对于前后端分离的场景，文件上传部分的功能就无法直接使用，需要做一些修改才能实现功能。

        本文分享了在UEditor中如何通过使用Ajax发送Post请求的方式完成文件上传。

        本文使用的UEditor版本是 ueditor1_4_3_3-utf8-asp

1、首先需要修改 UEditor 配置文件中的后台服务地址

        代码位于 ueditor.config.js 中

        原来的地址是下载的相对目录的后台代码文件的地址：

// 服务器统一请求接口路径
, serverUrl: URL + "asp/controller.asp"

        修改为我们实际使用的服务端接口地址：

// 服务器统一请求接口路径
, serverUrl: "http://192.168.1.20:8080/api/ueditor/upload"

  2、然后修改 ueditor.all.js 文件中文件上传部分的代码

        在 ueditor.all.js 文件中搜索 simpleupload ，找到 UE.plugin.register('simpleupload', function () { ... 这一行， 整个大括号包含的部分就是文件上传相关的代码。

        需要修改的是 domUtils.on(input, 'change', function () {}); 文件选择改变事件的处理方法。

        需要先在此方法前添加 jquery 的加载代码，以便使用 ajax， 完整的修改部分代码如下：

        // 加载jquery
        utils.loadFile(document, {
          src: me.options.UEDITOR_HOME_URL + "third-party/jquery-1.10.2.min.js",
          tag: "script",
          type: "text/javascript",
          defer: "defer"
        });
        domUtils.on(input, 'change', function () {
          if (!input.value) return;
          var loadingId = 'loading_' + (+new Date()).toString(36);
          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" title="' + (me.getLang('simpleupload.loading') || '') + '" >');
 
          /* 判断后端配置是否没有加载成功 */
          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 params = utils.serializeParam(me.queryCommandValue('serverparam')) || '';
          var action = utils.formatUrl(imageActionUrl + (imageActionUrl.indexOf('?') == -1 ? '?' : '&') + params);
          var formData = new FormData();
          formData.append("upfile", form[0].files[0]);
          $.ajax({
            url: action,
            type: 'POST',
            cache: false,
            data: formData,
            dataType: 'json',
            processData: false,
            contentType: false,
            success: function (data) {
              var link, loader;
              var opt = me.options;
              link = opt.imageUrlPrefix + data.url;
 
              if (data.state == 'SUCCESS' && data.url) {
                loader = me.document.getElementById(loadingId);
                loader.setAttribute('src', link);
                loader.setAttribute('_src', link);
                loader.setAttribute('title', data.title || '');
                loader.setAttribute('alt', data.original || '');
                loader.removeAttribute('id');
                domUtils.removeClasses(loader, 'loadingclass');
              } else {
                showErrorLoader && showErrorLoader(data.state);
              }
              form.reset();
            }
          });
 
 
          function showErrorLoader(title) {
            if (loadingId) {
              var loader = me.document.getElementById(loadingId);
              loader && domUtils.remove(loader);
              me.fireEvent('showmessage', {
                'id': loadingId,
                'content': title,
                'type': 'error',
                'timeout': 4000
              });
            }
          }
        });

        除了请求部分做了修改，其余部分还是沿用原有代码，防止产生额外bug。

        需要注意的是后台接口返回字段定义需要与 ajax 请求回调处理部分的定义保持一致。

3、实际效果展示

        点击插入图片按钮：

        选择图片文件： 

         点击打开后，使用ajax.post向后台接口上传图片，接收后台返回数据显示图片：

         后台接口返回数据：