為了能較少引用js，提高頁面載入速度，requirejs逐漸流行起來。本文是requirejs和當下主流外掛結合的使用總結。

其中：富文字編輯器是百度的UEditor，MVC框架是java開發最流行的SpringMVC，伺服器是小使用者使用較多的七牛雲（跟阿里雲等沒法比，但是很經濟實惠才是硬道理），不多說，寫下自己能使用的解決方案，以備將來之用，也給別人送支玫瑰。

一、requirejs配置檔案引入ueditor：

// 配置依賴
require.config({
    baseUrl: '/lib',
    paths: {
        'ueditor': 'ueditor/ueditor.all.min',
        'ueditor.config': 'ueditor/ueditor.config',
        'ZeroClipboard' : 'ueditor/third-party/zeroclipboard/ZeroClipboard'
    },
    shim: {
        'ueditor': {  deps: ['ueditor.config'] }
    }
});
// 主函式
require([ 'ZeroClipboard',  'ueditor'], function (ZeroClipboard) {
     // 初始化ZeroClipboard，此處一定要有，不然會報錯
     window['ZeroClipboard'] = ZeroClipboard;
	……
});
 

二、ueditor.config.js配置

其中的window.UEDITOR_HOME_URL必須有，配置為相對路徑即可。

imageUrl配置為自己的後臺處理介面。

三、後臺介面程式碼：

    private final static String[] imageAllowFiles = { ".jpg",".jpeg",".png" };

   /**
     * UEditor上傳配置
     *
     * @return
     */
    @RequestMapping("/ueditor/config")
    @ResponseBody
    public Map<String, Object> upload(String action,
                                      @RequestParam(required = false, value = "image") CommonsMultipartFile image) throws IOException {
        long imageMaxSize = 2048000L; //上傳大小限制，單位B
        Map<String, Object> resultMap = new HashMap<>();

        // ueditor請求後臺配置時的相應函式
        if (StringUtils.isNotBlank(action) && action.equals("config")) {

            resultMap.put("imageActionName", "uploadimage"); // 上傳圖片的action

            // 這個配置是ueditor上傳檔案的name屬性
            resultMap.put("imageFieldName", "image");
            resultMap.put("imageMaxSize", imageMaxSize);
            resultMap.put("imageAllowFiles", imageAllowFiles);//必須指定，不然多圖片上傳時，會提示”檔案格式不允許”
            resultMap.put("imageUrlPrefix", "");
            resultMap.put("state", "SUCCESS");
        } else {
            if (null == image) {
                resultMap.put("state", "上傳失敗，上傳的圖片為空");
            } else {
                String imgName = image.getOriginalFilename();
                String type = imgName.lastIndexOf(".") == -1 ? "" : imgName.substring(imgName.lastIndexOf("."));
                resultMap.put("original", image.getOriginalFilename());
                resultMap.put("type", type);
                if (!checkImageType(imgName)) {
                    resultMap.put("state", "上傳失敗,目前支援" + Arrays.toString(imageAllowFiles) + "型別的圖片");
                } else {
                    long size = image.getSize();
                    resultMap.put("size", size);
                    if (size > imageMaxSize) {
                        resultMap.put("state", "上傳失敗，檔案大小不能超過[" + (imageMaxSize / 1024 / 1024) + "]M");
                    } else {
                        resultMap.putAll(qiniuUtil.upLoadByte(image.getBytes(),type.toLowerCase()));
                        resultMap.put("state", "SUCCESS");
                    }
                }
            }
        }
        return resultMap;
    }

    /**
     * 判斷檔名稱是否是允許的檔案型別
     *
     * @param fileName
     * @return
     */
    private boolean checkImageType(String fileName) {
        if (StringUtils.isBlank(fileName)) {
            return false;
        }
        int i = fileName.lastIndexOf(".");
        if (i == -1) {
            return false;
        }
        String type = fileName.substring(i);

        for (String ext : imageAllowFiles) {
            if (ext.equalsIgnoreCase(type)) {
                return true;
            }
        }
        return false;
    }
 

四、Ueditor選擇圖片彈出選擇框過慢

這個是因為沒有指定可接受圖片型別，將所引用的ueditor.all.js(或ueditor.all.min.js，看引用的是哪一個)中的接受型別由”image/*”改為自己需要的型別，以下是我修改後的。

五、備註

1：程式碼中涉及的util需要自己定義；

2：本文是將圖片直接上傳到七牛雲，所以需要自己拼接返回前端的引數。

3：前端需要引數如下：

"state"=> "", //上傳狀態，上傳成功時必須返回"SUCCESS"

"url"=> "", //返回的地址

"title"=> "", //新檔名

"original"=> "", //原始檔名

"type"=> "" //檔案型別

"size"=> "", //檔案大小

4：七牛上傳程式碼如下，其中返回了前端需要的url和title。

public Map<String,Object> upLoadByte(byte[] data, String type){
		Map<String, Object> res = new HashMap<>();
		String key = getKey()+type;
		Configuration cfg = new Configuration(Zone.autoZone());
		UploadManager uploadManager=new UploadManager(cfg);
		try {
			Response response= uploadManager.put(data, key, getUpToken());
			if (response.isOK()){
				res.put("url",domain+"/"+key);
				res.put("title",key);
			}
		} catch (QiniuException e) {
			Response r = e.response;
			System.err.println(r.toString());
		}
		return res;
	}

5:切記（提醒自己和七牛使用者）

七牛7.2.2以上java-sdk版本才有

Configurationcfg = new Configuration(Zone.autoZone());

         UploadManageruploadManager=new UploadManager(cfg);

低版本沒有Configuration，不可用。如果直接使用無參構造定義UploadManager uploadManager=new UploadManager();會出現初始化錯誤。