百度UEditor的坑--2018--10--29
阿新 • • 發佈：2018-12-18
下載百度ueditor的jar包 下載壓縮包
解壓後的目錄
2.將jar加入到你的webapp或者是webConetnt(我的是webContent)
3.在頁面新增ueditor的HTML和js程式碼
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" /> <script type="text/javascript" charset="utf-8" src="${base}/ueditor/ueditor.config.js"></script> <script type="text/javascript" charset="utf-8" src="${base}/ueditor/ueditor.all.min.js"></script> <!--建議手動加在語言，避免在ie下有時因為載入語言失敗導致編輯器載入失敗--> <!--這裡載入的語言檔案會覆蓋你在配置專案裡新增的語言型別，比如你在 配置專案裡配置的是英文，這裡載入的中文，那最後就是中文--> <script type="text/javascript" charset="utf-8" src="${base}/ueditor/lang/zh-cn/zh-cn.js"></script> <h1>商品描述</h1><!--初始化ueditor編輯器--> <script id="editor" type="text/plain" style="width:850px;height:500px;"></script> <script> //建立ueditor編輯器 var ue = UE.getEditor('editor'); //重新定義圖片上傳圖路徑 UE.Editor.prototype._bkGetActionUrl = UE.Editor.prototype.getActionUrl; UE.Editor.prototype.getActionUrl = function(action) { if(action == 'uploadimage' || action == 'uploadscrawl' || action == 'uploadvideo') { return '/ueditor/upload/image.jhtml';//自己定義的上傳url路徑 } else { return this._bkGetActionUrl.call(this, action); } } //獲取上傳成功返回json資料進行回顯 var root = UE.htmlparser(UE.getEditor('articleContent').getContent(), true); var imgs = new Array(); imgs = root.getNodesByTagName('img'); var ueImg = {}; for(var i = 0; i < imgs.length; i++) { console.log(imgs[i].getAttr('src')); if(!portal.utils.isEmpty(imgs[i].getAttr('alt'))) { var url = imgs[i].getAttr('src'); var urlArray = imgs[i].getAttr('src').split("/"); if(portal.utils.isEmpty(ueImg.oriName)) { ueImg.oriName = imgs[i].getAttr('alt'); ueImg.newName = urlArray[urlArray.length - 1]; ueImg.filePath = urlArray[3] + "/" + urlArray[4] + "/"; } else { ueImg.oriName += "," + imgs[i].getAttr('alt'); ueImg.newName += "," + urlArray[urlArray.length - 1]; ueImg.filePath += "," + urlArray[3] + "/" + urlArray[4] + "/"; alert(ueImg.oriName); } } } </script>
4.由於我是用的是springmvc框架作為web端的框架 索引不能直接執行jsp檔案 只好參考網上大牛的部落格 這是jsp程式碼 把這些程式碼轉換成自己的controller控制層,由於修改了這個地方,需要修改ueditor.config.js
// 伺服器統一請求介面路徑 , serverUrl: URL + "/config/getConfig.jhtml"
在這裡如果配置不對會出現
後端配置項沒有正常載入 上傳外掛不能正常使用
再上傳頁面的地方(需要注意) 需要將config.json 放在ueditor/config 它會自動載入這個json檔案,如果找不到就會出 現異常 這個config是根據 上面的url config/getConfig.jhtml 自定義的
5.使用自定義的方式進行圖片上傳
//重新定義圖片上傳圖路徑 UE.Editor.prototype._bkGetActionUrl = UE.Editor.prototype.getActionUrl; UE.Editor.prototype.getActionUrl = function(action) { if(action == 'uploadimage' || action == 'uploadscrawl' || action == 'uploadvideo') { return '/ueditor/upload/image.jhtml';//自己定義的上傳url路徑 } else { return this._bkGetActionUrl.call(this, action); } }
以下是java程式碼
package com.amysky.wxmember.controller;
import java.io.File;
import java.util.Map;
import javax.servlet.http.HttpServletRequest;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.multipart.MultipartFile;
import com.amysky.wxmember.utils.FileInputImageUtils;
import com.baidu.ueditor.ActionEnter;
@Controller
@RequestMapping("/ueditor")
public class UeditorController {
@RequestMapping("/config/getConfig.jhtml")
@ResponseBody
public String config(HttpServletRequest request) {
String rootPath = request.getSession().getServletContext().getRealPath("/");
return new ActionEnter(request, rootPath).exec();
}
@ResponseBody
@RequestMapping(value = "/upload/image", method = RequestMethod.POST)
public Map<String, Object> uploadImage(@RequestParam("upfile") MultipartFile upfile, HttpServletRequest request) {
String getRealPath = "upload";
String fileName = "commodity";
String createFilePath = "wxmember" + File.separator + fileName;
Map<String, Object> map = FileInputImageUtils.windowUditor(upfile, getRealPath, createFilePath, request);
return map;
}
}
/**
* 使用百度ueditor上傳圖片
* @param request
* @param getRealPath
* @param createFilePath
* @return
*/
public static Map<String,Object> windowUditor(MultipartFile multipartFile,String getRealPath, String createFilePath,HttpServletRequest request) {
Map<String,Object> map = new HashMap<String,Object>();
InputStream is=null;
OutputStream os =null;
try {
//獲取檔名稱
String originalFilename = multipartFile.getOriginalFilename();
//獲取檔案的字尾
String suffix = originalFilename.substring(originalFilename.lastIndexOf("."));
//使用現在的 時間作為圖片的新名稱
String fileName = new SimpleDateFormat("yyyyMMddHHmmssSSS").format(new Date());
//獲取資料夾在Windows上的 真是檔案路徑 例如: upload資料夾
String realPath = request.getServletContext().getRealPath(getRealPath);
//建立儲存圖片的資料夾
String path=realPath+File.separator+createFilePath;
//不存在就建立
File file = new File(path);
if(!file.exists()){
file.mkdirs();
}
//儲存檔案
file=new File(path+File.separator+fileName+suffix);
is = multipartFile.getInputStream();
os= new FileOutputStream(file);
//拷貝檔案
copyFile(is, os);
map.put("state", "SUCCESS");
map.put("original", originalFilename);
map.put("name", fileName);
map.put("url", getRealPath+File.separator+createFilePath+File.separator+fileName+suffix);
map.put("type", suffix);
map.put("size", multipartFile.getSize());
} catch (Exception e) {
e.printStackTrace();
}finally {
try {
os.close();
} catch (IOException e) {
e.printStackTrace();
}
try {
is.close();
} catch (IOException e) {
e.printStackTrace();
}
}
return map;
}
/**
* 檔案拷貝
*
* @param is
* @param os
* @throws IOException
*/
private static void copyFile(InputStream is, OutputStream os) throws IOException {
byte[] b = new byte[1024];
int len = 0;
while ((len = is.read(b)) != -1) {
os.write(b, 0, len);
}
os.flush();
}
前端頁面解析json資料程式碼
//獲取上傳成功返回json資料進行回顯
var root = UE.htmlparser(UE.getEditor('articleContent').getContent(), true);
var imgs = new Array();
imgs = root.getNodesByTagName('img');
var ueImg = {};
for(var i = 0; i < imgs.length; i++) {
console.log(imgs[i].getAttr('src'));
if(!portal.utils.isEmpty(imgs[i].getAttr('alt'))) {
var url = imgs[i].getAttr('src');
var urlArray = imgs[i].getAttr('src').split("/");
if(portal.utils.isEmpty(ueImg.oriName)) {
ueImg.oriName = imgs[i].getAttr('alt');
ueImg.newName = urlArray[urlArray.length - 1];
ueImg.filePath = urlArray[3] + "/" + urlArray[4] + "/";
} else {
ueImg.oriName += "," + imgs[i].getAttr('alt');
ueImg.newName += "," + urlArray[urlArray.length - 1];
ueImg.filePath += "," + urlArray[3] + "/" + urlArray[4] + "/";
alert(ueImg.oriName);
}
}
}6.進行圖片回顯 否則會在富文字編輯中不顯示圖片
我修改的地方是
"imageUrlPrefix": "http://localhost:8080/", /* 圖片訪問路徑字首 */
加入自己的網址或者本地訪問方式
最終的效果圖
最後獲取富文字編輯器中的內容
content=UE.getEditor('editor').getContent();
也可以參考 ueditor資料夾中的那些js函式