一、使用環境

• Win7
• Eclipse
• jettty9
• chrome

二、下載百度UEditor外掛

2、這裡下載的版本是[1.4.3.3 Jsp版本]

3、將下載好的檔案包放在工程目錄中

4、修改ueditor/ueditor.config.js 裡的務器統一請求介面路徑

注：這個請求路徑是請求伺服器得到配置資訊，所以需要在伺服器中配置這個配置資訊

5、編寫配置資訊程式碼

Ueditor 官方例子是直接返回一個json檔案，此處為了方便直接返回一個json物件

    @RequestMapping(value = "config")
    @ResponseBody
 

    public JSONObject config(String action, @RequestParam(required = false) String callback, @RequestParam(required = false) String encode,
            HttpServletRequest request) throws Exception {
        JSONObject jsonObject = new JSONObject();
        jsonObject = getConfig();
        // action引數為getConfig中的jsonObject.put("imageActionName", "uploadimage");
 

        if (action.equals("uploadimage")) {
            // 此處返回上傳後的圖片路徑，json格式為{["url":"http://xinrui.com/image/1.png","state":"SUCCESS"]}
            jsonObject = imgcompressService.ueEditorUpload(request);
        }
        return jsonObject;
    }

    public JSONObject getConfig() {
        JSONObject jsonObject = new
 
 JSONObject();
        jsonObject.put("imageActionName", "uploadimage"); // 執行上傳圖片的action名稱
        jsonObject.put("imageAllowFiles", new String[] { ".png", ".jpg", ".jpeg", ".gif", ".bmp" }); // 允許上傳的圖片型別
        jsonObject.put("imageFieldName", "upfile"); // 提交的圖片表單名稱
        jsonObject.put("imageMaxSize", "2048000"); // 上傳大小限制，單位B
        jsonObject.put("imageCompressEnable", true); // 是否壓縮圖片,預設是true
        jsonObject.put("imageCompressBorder", 1600); // 圖片壓縮最長邊限制
        jsonObject.put("imageInsertAlign", "none"); // 插入的圖片浮動方式
        jsonObject.put("imageUrlPrefix", "http://xinrui.com/image/"); // 圖片訪問路徑字首
        jsonObject.put("imagePathFormat", "/{yyyy}{mm}{dd}/{time}{rand:6}"); // 上傳儲存路徑,可以自定義儲存路徑和檔名格式
        return jsonObject;
    }

6、前端呼叫

（1）在相應頁面引入js

   <script type="text/javascript" src="plugin/ueditor/ueditor.config.js"></script>
   <script type="text/javascript" src="plugin/ueditor/ueditor.all.min.js"></script>

  <div class="form-group">
        <label class="col-sm-1 control-label">富文字描述：</label>
         <div class="col-md-9">
             <script id="container" type="text/plain"></script>
         </div>
  </div>

（2） js呼叫

<script>
     makeUeEditor('container');
     function makeUeEditor (id) {
          UE.delEditor(id);
          var ue = UE.getEditor(id, {
            autoHeight: false,
            wordCount: false,
           });
             return ue;
          },
     function setUeEditor (id, data) {  // 填充富文字
          var ue = UE.getEditor(id);
          ue.addListener("ready", function () {
             ue.setContent(data);
          });
      },
</script>

7、至此，已經可以使用簡單的UEditor功能了，但是還要編寫圖片上傳的處理程式碼