ueditor 新增自定義上傳介面
阿新 • • 發佈:2019-01-01
1.從http://ueditor.baidu.com/website/ 下載jsp版本
2.將下載的壓縮檔案解壓,命名為ueditor,複製整個資料夾到專案中
3.在頁面上新建一個textarea的標籤
<textarea id="container" name="content" style="width: 100%; height: 350px; margin: 0 auto;"></textarea>
4.
<!-- 配置檔案 -->
<script type="text/javascript" src="plugins/ueditor/ueditor.config.js"></script>
<!-- 編輯器原始碼檔案 -->
<script type="text/javascript" src="plugins/ueditor/ueditor.all.js"></script>
<!-- 例項化編輯器 -->
<script type="text/javascript">
var ue = UE.getEditor('container');
UE.Editor.prototype._bkGetActionUrl = UE.Editor.prototype.getActionUrl;
UE.Editor.prototype.getActionUrl = function(action) {
if (action == 'uploadimage' || action == 'uploadscrawl' || action == 'uploadimage') {
return '<%=basePath%>apps/editUpload';
} else if (action == 'uploadvideo') {
return '<%=basePath%>apps/editUpload';
} else {
return this._bkGetActionUrl.call(this, action);
}
}
</script>
5.springmvc後臺程式碼
/**
* 上傳圖片到OOS
*
* @param file
* @param response
* @throws IOException
*/
@RequestMapping(value = "/editUpload", method = RequestMethod.POST)
@ResponseBody
public UploaderParam editUpload(@RequestParam(value = "upfile", required = false) MultipartFile file) throws IOException {
// 將MultipartFile轉換成file
CommonsMultipartFile cf = (CommonsMultipartFile) file;
DiskFileItem fi = (DiskFileItem) cf.getFileItem();
File f = fi.getStoreLocation();
String prefix = file.getOriginalFilename().substring(file.getOriginalFilename().lastIndexOf(".") + 1);// 字尾名
String key = "upload/" + UuidUtil.get32UUID() + "." + prefix;
try {
OOSUtils.upload2(f, key);
} catch (Exception e) {
// error = e.getMessage();
}
String url = "http://couponworld.oss-cn-shenzhen.aliyuncs.com/" + key;
UploaderParam uploaderParam = new UploaderParam(file.getName(), file.getOriginalFilename(), file.getSize(),
"SUCCESS", file.getContentType(), url, file.getOriginalFilename());
return uploaderParam;
}
uploadParam實體類:
public class UploaderParam {
private String name; // 通過upfile獲取
private String originalName; // 通過upfile獲取
private Long size; // 通過upfile獲取
private String state;// 成功必須為"SUCCESS"
private String type; // 通過upfile獲取
private String url; // 圖片回顯url
private String title;
public UploaderParam() {
super();
}
public UploaderParam(String name, String originalName, Long size, String state, String type, String url,
String title) {
super();
this.name = name;
this.originalName = originalName;
this.size = size;
this.state = state;
this.type = type;
this.url = url;
this.title = title;
}
public String getTitle() {
return title;
}
public void setTitle(String title) {
this.title = title;
}
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
public String getOriginalName() {
return originalName;
}
public void setOriginalName(String originalName) {
this.originalName = originalName;
}
public Long getSize() {
return size;
}
public void setSize(Long size) {
this.size = size;
}
public String getState() {
return state;
}
public void setState(String state) {
this.state = state;
}
public String getType() {
return type;
}
public void setType(String type) {
this.type = type;
}
public String getUrl() {
return url;
}
public void setUrl(String url) {
this.url = url;
}
}
2.將下載的壓縮檔案解壓,命名為ueditor,複製整個資料夾到專案中
3.在頁面上新建一個textarea的標籤
<textarea id="container" name="content" style="width: 100%; height: 350px; margin: 0 auto;"></textarea>
4.
<!-- 配置檔案 -->
<script type="text/javascript" src="plugins/ueditor/ueditor.config.js"></script>
<!-- 編輯器原始碼檔案 -->
<script type="text/javascript" src="plugins/ueditor/ueditor.all.js"></script>
<!-- 例項化編輯器 -->
<script type="text/javascript">
var ue = UE.getEditor('container');
UE.Editor.prototype._bkGetActionUrl = UE.Editor.prototype.getActionUrl;
UE.Editor.prototype.getActionUrl = function(action) {
if (action == 'uploadimage' || action == 'uploadscrawl' || action == 'uploadimage') {
return '<%=basePath%>apps/editUpload';
} else if (action == 'uploadvideo') {
return '<%=basePath%>apps/editUpload';
} else {
return this._bkGetActionUrl.call(this, action);
}
}
</script>
5.springmvc後臺程式碼
/**
* 上傳圖片到OOS
*
* @param file
* @param response
* @throws IOException
*/
@RequestMapping(value = "/editUpload", method = RequestMethod.POST)
@ResponseBody
public UploaderParam editUpload(@RequestParam(value = "upfile", required = false) MultipartFile file) throws IOException {
// 將MultipartFile轉換成file
CommonsMultipartFile cf = (CommonsMultipartFile) file;
DiskFileItem fi = (DiskFileItem) cf.getFileItem();
File f = fi.getStoreLocation();
String prefix = file.getOriginalFilename().substring(file.getOriginalFilename().lastIndexOf(".") + 1);// 字尾名
String key = "upload/" + UuidUtil.get32UUID() + "." + prefix;
try {
OOSUtils.upload2(f, key);
} catch (Exception e) {
// error = e.getMessage();
}
String url = "http://couponworld.oss-cn-shenzhen.aliyuncs.com/" + key;
UploaderParam uploaderParam = new UploaderParam(file.getName(), file.getOriginalFilename(), file.getSize(),
"SUCCESS", file.getContentType(), url, file.getOriginalFilename());
return uploaderParam;
}
uploadParam實體類:
public class UploaderParam {
private String name; // 通過upfile獲取
private String originalName; // 通過upfile獲取
private Long size; // 通過upfile獲取
private String state;// 成功必須為"SUCCESS"
private String type; // 通過upfile獲取
private String url; // 圖片回顯url
private String title;
public UploaderParam() {
super();
}
public UploaderParam(String name, String originalName, Long size, String state, String type, String url,
String title) {
super();
this.name = name;
this.originalName = originalName;
this.size = size;
this.state = state;
this.type = type;
this.url = url;
this.title = title;
}
public String getTitle() {
return title;
}
public void setTitle(String title) {
this.title = title;
}
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
public String getOriginalName() {
return originalName;
}
public void setOriginalName(String originalName) {
this.originalName = originalName;
}
public Long getSize() {
return size;
}
public void setSize(Long size) {
this.size = size;
}
public String getState() {
return state;
}
public void setState(String state) {
this.state = state;
}
public String getType() {
return type;
}
public void setType(String type) {
this.type = type;
}
public String getUrl() {
return url;
}
public void setUrl(String url) {
this.url = url;
}
}