~~經過一上午的時間，終於把ueditor編輯器搞出來了，僅做記錄
#完成的樣子
1，首先在官網下載對應的插件 【附下載地址：http://ueditor.baidu.com/website/download.html】
本人使用的是Java語言 ，框架是ssm+maven
2，解壓文件，在自己項目的根目錄下新建文件夾 ueditor，把utf8-jsp中文件復制粘貼到ueditor文件夾下
3，新建一個ueditorTest.jsp，把文件夾中index.html中的HTML代碼復制粘貼到這個jsp中，引入下面這四個js和css
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <%@include file="/WEB-INF/jsp/common/tag.jsp" %> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>完整demo</title> <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/> <script type="text/javascript" charset="utf-8" src="${pageContext.request.contextPath}/assets/js/jquery.min.js"></script> <script type="text/javascript" charset="utf-8" src="${pageContext.request.contextPath}/ueditor/ueditor.config.js"></script> <script type="text/javascript" charset="utf-8" src="${pageContext.request.contextPath}/ueditor/ueditor.all.min.js"> </script> <!--建議手動加在語言，避免在ie下有時因為加載語言失敗導致編輯器加載失敗--> <!--這里加載的語言文件會覆蓋你在配置項目里添加的語言類型，比如你在配置項目里配置的是英文，這里加載的中文，那最后就是中文--> <script type="text/javascript" charset="utf-8" src="${pageContext.request.contextPath}/ueditor/lang/zh-cn/zh-cn.js"></script> <style type="text/css"> div{ width:100%; } </style> </head> <body> <div> <h1>完整demo</h1> <textarea name="content" id="editor" style="width:820px;height:200px;"></textarea> </div>
<script type="text/javascript">
//實例化編輯器
var ue = UE.getEditor('editor');
</script
</body> </html>
4，我使用的是maven管理jar，所以/ueditor/jsp/lib下的前四個jar包在pom.xml引入，ueditor-1.1.2.jar可放在/WEB-INF/下lib文件夾中（沒有就新建一個），並bulidpath
5，修改配置文件ueditor.config.js中的兩處代碼
//【需要改的第一處：】
var URL = window.UEDITOR_HOME_URL || "/xxxxx/ueditor/"; //xxxxx為你項目名稱，即此處為ueditor文件夾相對項目的路徑
window.UEDITOR_CONFIG = {
//【需要改的第二處：】
, serverUrl: "/xxxx/upload/enter" //需要修改的第二處路徑，xxxx同樣是你的項目名稱，
//upload為你要新建的controller的訪問路徑，enter為入口方法，controller具體代碼在下文
* 6，這個很重要，config.json文件放的路徑一定要按照上面5中 serverUrl: "/xxxx/upload/enter" 對應，放在根路徑下upload文件夾中（沒有就新建一個文件夾），否則會一直報錯：請求后台配置錯誤，上傳功能將不能正常使用！
config.json中內容根據實際情況修改config.json文件中三個參數
"imageActionName": "uploadimage",
"imageFieldName": "upfile",
"imagePathFormat": "/ueditor/jsp/upload/image/{yyyy}{mm}{dd}/{time}{rand:6}",
如果上傳的文件（圖片或附件）位置不在自己項目中，可在"imageUrlPrefix": " "中加路徑前綴訪問到
7，接下來要新建一個controller.java（由於ueditor給的方案中，把Java代碼寫到了controller.jsp中了，為了方便，建此controller.java文件），作為ueditor上傳圖片和附件的入口函數。
其中有兩個點需要注意：
(1) 上面代碼中 , serverUrl: "/xxxx/upload/enter" 的 /upload 和 /enter跟下面代碼中 mapper 對應
(2) 下面代碼為controller.jsp中粘貼過來稍作改動而來
@Controller
@RequestMapping("/upload")
public class uploadController {
@RequestMapping(value="/enter",method=RequestMethod.GET)
public void enterUE(HttpServletRequest request,HttpServletResponse response) {
try {
request.setCharacterEncoding( "utf-8" );
} catch (UnsupportedEncodingException e) {
e.printStackTrace();
}
response.setHeader("Content-Type" , "text/html");
String rootPath = request.getSession().getServletContext().getRealPath("/");
try {
String exec = new ActionEnter(request, rootPath).exec();
PrintWriter writer = response.getWriter();
writer.write(exec);
writer.flush();
writer.close();
} catch (IOException e) {
e.printStackTrace();
}
}
}
8，此時你可以訪問ueditorTest.jsp，點擊多圖上傳，會出現這個樣子
如果出現報錯，說明第5步ueditor.config.js中路徑配置錯了
9，開始寫上傳圖片和附件的代碼了
首先在ueditor.jsp中的<script></script>標簽中加入如下代碼
//實例化編輯器
var ue = UE.getEditor('editor');
//根據不同action上傳圖片和附件
UE.Editor.prototype._bkGetActionUrl = UE.Editor.prototype.getActionUrl;
UE.Editor.prototype.getActionUrl = function(action) {
if (action == 'uploadimage') {
return '${pageContext.request.contextPath}/upload/uploadimage';
} else if (action == 'uploadfile') {
return '${pageContext.request.contextPath}/upload/uploadfile';
} else {
return this._bkGetActionUrl.call(this, action);
}
}
再在controller中寫對應方法
/** * ueditor上傳圖片的方法 * @param upfile 上傳圖片的文件 * @param request * @param response * @return */ @RequestMapping(value="/uploadimage",method=RequestMethod.POST) @ResponseBody public Map<String, Object> uploadNewsImg(@RequestParam(value="upfile",required=false) MultipartFile upfile,HttpServletRequest request,HttpServletResponse response) { Date date = new Date(); String upLoadPath = "\\upload\\file\\"+new SimpleDateFormat("yyyy\\MM\\").format(date); String path = upLoadPath; //圖片后綴 String last = upfile.getOriginalFilename().substring(upfile.getOriginalFilename().lastIndexOf("."), upfile.getOriginalFilename().length()); String uuid = UUID.randomUUID().toString().replace("-", ""); String fileName = uuid+last; File fileT = new File(path,fileName); if(!fileT.exists()){ fileT.mkdirs(); } Map<String, Object> result = new HashMap<String,Object>(); try { upfile.transferTo(fileT); } catch (IllegalStateException e) { logger.error("富文本編輯器圖片上傳失敗，參數異常："+e); } catch (IOException e1) { logger.error("富文本編輯器圖片上傳失敗io異常："+e1); } result.put("state", "SUCCESS"); result.put("url", upLoadPath.replace("\\", "/")+fileName); result.put("original", ""); result.put("type", last); result.put("size", upfile.getSize()); result.put("title", fileName); return result; } /** * ueditor文件上傳方法 * @param upfile * @param request * @param response * @return */ @RequestMapping(value="/uploadfile",method=RequestMethod.POST) @ResponseBody public Map<String, Object> uploadFile(@RequestParam(value="upfile",required=false) MultipartFile upfile,HttpServletRequest request,HttpServletResponse response) { Date date = new Date(); String upLoadPath = "\\upload\\file\\"+new SimpleDateFormat("yyyy\\MM\\").format(date); String path = upLoadPath; //附件后綴 String last = upfile.getOriginalFilename().substring(upfile.getOriginalFilename().lastIndexOf("."), upfile.getOriginalFilename().length()); String uuid = UUID.randomUUID().toString().replace("-", ""); String fileName = uuid+last; File fileT = new File(path,fileName); if(!fileT.exists()){ fileT.mkdirs(); } Map<String, Object> result = new HashMap<String,Object>(); try { upfile.transferTo(fileT); } catch (IllegalStateException e) { logger.error("富文本編輯器文件上傳失敗，參數異常："+e); } catch (IOException e1) { logger.error("富文本編輯器文件上傳失敗io異常："+e1); } result.put("state", "SUCCESS"); result.put("url", upLoadPath.replace("\\", "/")+fileName); result.put("original", ""); result.put("type", last); result.put("size", upfile.getSize()); result.put("title", fileName); return result; }
到此簡單的上傳圖片和文件到此就完結了。有什么不足之處，歡迎指出！