Ueditor下載地址：
http://ueditor.baidu.com/website/download.html
下載后直接解壓縮。我主要實現文件上傳和form表單提交數據。
一、配置文件修改
uedit.config.js
var URL = window.UEDITOR_HOME_URL; //主要是本地ueditor文件目錄
serverUrl: URL + "jsp/config.jhtml" // 服務器統一請求接口路徑
conf.json
"p_w_picpathUrlPrefix": "http://localhost:8080/fetchbaike/ueditor/jsp/upload/", /* 圖片訪問路徑前綴 */
二 、頁面修改
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
<script type="text/javascript" charset="utf-8" src="./ueditor/ueditor.config.js"></script>
<script type="text/javascript" charset="utf-8" src="./ueditor/ueditor.all.min.js"> </script>
<!--建議手動加在語言，避免在ie下有時因為加載語言失敗導致編輯器加載失敗-->
<!--這里加載的語言文件會覆蓋你在配置項目里添加的語言類型，比如你在配置項目里配置的是英文，這里加載的中文，那最后就是中文-->
<script type="text/javascript" charset="utf-8" src="./ueditor/lang/zh-cn/zh-cn.js"></script>
tyle type="text/css">
div{
width:100%;
}
</style>
</head>
<body>
<form id="form" method="post" action="./textarea.jhtml">
<input type="text" name="goodsname" value="goodsname" />
<script type="text/plain" id="myEditor" name="myEditor">
<p>歡迎使用UEditor！</p>
</script>
<input type="submit" value="提交"/>
</form>
<!-- editor的初始化 -->
<script type="text/javascript">
//實例化編輯器
//建議使用工廠方法getEditor創建和引用編輯器實例，如果在某個閉包下引用該編輯器，直接調用UE.getEditor('editor')就能拿到相關的實例
var editor_a = UE.getEditor('myEditor',{
initialFrameWidth : 400,
initialFrameHeight: 300});
<!--用于上傳文件跳轉到controller-->
UE.Editor.prototype._bkGetActionUrl = UE.Editor.prototype.getActionUrl;
UE.Editor.prototype.getActionUrl = function(action) {
if (action == 'uploadp_w_picpath' || action == 'uploadscrawl' || action == 'uploadp_w_picpath'
|| action == 'uploadvideo' || action == 'uploadfile') {
return './ueditor/uploadp_w_picpath.jhtml';
}else {
return this._bkGetActionUrl.call(this, action);
}
}
</script>
</body>三、后臺操作
@Controller
@RequestMapping(value="/ueditor")
public class UeditorController {
@RequestMapping(value="/jsp/config")
public void config(HttpServletRequest request,HttpServletResponse response,String action) throws Exception {
request.setCharacterEncoding("utf-8");
response.setHeader("Content-Type", "text/html");
String rootPath=request.getSession().getServletContext().getRealPath("/");
//會加載conf.json文件，注意路徑問題
response.getWriter().write(new ActionEnter(request,rootPath).exec());
}
@RequestMapping(value="/uploadp_w_picpath")
@ResponseBody
public Map<String,Object> uploadp_w_picpath(@RequestParam("upfile") MultipartFile[] multipartFiles, HttpServletRequest request,HttpServletResponse response) throws Exception {
Map<String,Object> map=new HashMap<String,Object>();
String path=request.getSession().getServletContext().getRealPath("/ueditor/jsp/upload/");
System.out.println("path++"+path);
if(multipartFiles!=null && multipartFiles.length>0){
//循環遍歷
for (MultipartFile multipartFile : multipartFiles) {
//原來圖片的名稱
String OriginalFilename=multipartFile.getOriginalFilename();
//獲得圖片新名稱
String newFileName=getFileNewName(OriginalFilename.substring(OriginalFilename.lastIndexOf(".")));
//創建文件
File targetFile=new File(path,newFileName);
if(!targetFile.exists()){
targetFile.mkdirs();
}
String state="SUCCESS";
try {
multipartFile.transferTo(targetFile);
map.put("original", OriginalFilename);
map.put("name",newFileName);
//注意url會和conf.json中的路徑配合找到圖片
map.put("url", newFileName);
map.put("state", "SUCCESS");
} catch (Exception e) {
state="FAIL";
}
}
}
return map;
}免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
