首先引入相關js和jar包

jar：ueditor-x.x.x.jar

js:

<script src="${ctx }/static/baidu-ueditor/ueditor.config.js"
	type="text/javascript"></script>
<script src="${ctx }/static/baidu-ueditor/ueditor.all.min.js"
	type="text/javascript"></script>
<script src="${ctx }/static/baidu-ueditor/lang/zh-cn/zh-cn.js"
	type="text/javascript"></script>
 

頁面中新增textarea標籤

<textarea name="newsContent" id="newsContent"></textarea>

初始化百度編輯器

var editor = UE.getEditor('newsContent',{  
    //這裡可以選擇自己需要的工具按鈕名稱
    toolbars:[[ 'fullscreen', 'source', '|', 'undo', 'redo', '|',
'bold', 'italic', 'underline', 'fontborder', 'strikethrough', 'superscript', 'subscript', 'removeformat', 'formatmatch', 'autotypeset', 'blockquote', 'pasteplain', '|', 'forecolor', 'backcolor', 'insertorderedlist', 'insertunorderedlist', 'selectall', 'cleardoc', '|',
'rowspacingtop', 'rowspacingbottom', 'lineheight', '|',
'customstyle', 'paragraph', 'fontfamily', 'fontsize', '|',
'directionalityltr', 'directionalityrtl', 'indent', '|',
'justifyleft', 'justifycenter', 'justifyright', 'justifyjustify', '|', 'touppercase', 'tolowercase','simpleupload','insertimage','attachment']],  
    //focus時自動清空初始化時的內容  
    autoClearinitialContent:false,  
    //關閉字數統計  
    wordCount:false,  
    //關閉elementPath  
    elementPathEnabled:false,  
    //預設的編輯區域高度  
    initialFrameHeight:300,
    initialFrameWidth:1100,
    enableAutoSave: false
    //更多其他引數，請參考ueditor.config.js中的配置項  
});
 

第一種將圖片存入虛擬路徑的方法（此方法用nginx的時候轉發路徑沒發配置，所以侷限較大）

"imageUrlPrefix": "", /* 圖片訪問路徑字首 */
    "imagePathFormat": "../../../file1/img/{yyyy}{mm}{dd}/{time}{rand:6}", /* 上傳儲存路徑,可以自定義儲存路徑和檔名格式 */

tomcat配置的虛擬路徑為與tomcat同級的file資料夾（如果不能回顯，自己慢慢調整路徑）

第二種方法是自定義上傳路徑

1.首先需要在js中定義上傳圖片的介面如下（此方法配置nginx轉發的時候只要注意更改config.json中的imageUrlPrefix即可）：

UE.Editor.prototype._bkGetActionUrl = UE.Editor.prototype.getActionUrl; 
UE.Editor.prototype.getActionUrl = function(action) {
    if (action == 'uploadimage' || action == 'uploadscrawl') {
        return 'http://localhost:8082/bim/WSupload/uploadimage';//這就是自定義的上傳地址
    } else if (action == 'uploadvideo') {
        return '';
    } else {
        return this._bkGetActionUrl.call(this, action);
    }
}

2.config.json中

"imageUrlPrefix": "http://localhost:8082/file1", /* 圖片訪問路徑字首 */
    "imagePathFormat": "", /* 上傳儲存路徑,可以自定義儲存路徑和檔名格式 */

3.後臺介面方法

@RequestMapping(value = "/uploadimage", method = RequestMethod.POST) 
    @ResponseBody 
    public Map<String, String> uploadimage(@RequestParam(value = "upfile") MultipartFile upfile) { 
        Map<String, String> map = new HashMap<>();
        String fileName=upfile.getOriginalFilename();
        SimpleDateFormat sdf = new SimpleDateFormat("yyyyMMddHHmmssSSS");
        String filename = sdf.format(new Date()) + new Random().nextInt(1000);
        String fileExt = fileName.substring(fileName.lastIndexOf(".") + 1).toLowerCase();
        filename=filename+"."+fileExt;//存入虛擬目錄後的檔名
        File uploadedFile = new File("H:\\file1\\img", filename);//存入虛擬目錄後的檔案
        try {
            upfile.transferTo(uploadedFile);//上傳
            map.put("url", "/img/"+filename);//這個url是前臺回顯路徑（回顯路徑為config.json中的imageUrlPrefix+此處的url）
            map.put("state", "SUCCESS");
            map.put("original", "");
        } catch (IllegalStateException e) {
            // TODO Auto-generated catch block
            e.printStackTrace();
        } catch (IOException e) {
            // TODO Auto-generated catch block
            e.printStackTrace();
        }
        return map;
    }

後臺返回json規範：

測試。。。