需求:
页面中弹出dialog页面,并在页面中实现富文本框kindeditor并提供附件上传功能。
首先页面引入相关js和css文件
<link rel="stylesheet" href="<%=request.getContextPath() %>/kindeditor/themes/default/default.css" />
<link rel="stylesheet" href="<%=request.getContextPath() %>/kindeditor/plugins/code/prettify.css" />
<script charset="utf-8" src="<%=request.getContextPath() %>/kindeditor/kindeditor-all.js"></script>
<script charset="utf-8" src="<%=request.getContextPath() %>/kindeditor/lang/zh-CN.js"></script>
<script charset="utf-8" src="<%=request.getContextPath() %>/kindeditor/plugins/code/prettify.js"></script>
js内容
<script type="text/javascript" >
KindEditor.ready(function(K) {
window.editor = K.create('#editor_id', {
uploadJson: '<%=request.getContextPath()%>/XXXAdmin/uploadfj.htm',
fileManagerJson: '<%=request.getContextPath() %>/kindeditor/jsp/file_manager_json.jsp',
allowFileManager: true,
afterCreate: function() {
var self = this;
K.ctrl(document, 13,
function() {
self.sync();
document.forms['#form'].submit();
});
K.ctrl(self.edit.doc, 13,
function() {
self.sync();
document.forms['#form'].submit();
});
}
});
});
function append() {
$("#addxxxlDialog").dialog({
title: '新增文章',
width: 1100,
height: 500,
left: 150,
top: 20,
bottom: 50,
modal: true,
resizable: true,
position: 'center',
buttons: [{
text: '保存',
handler: function() {
var id = $("#id").val();
var content = editor.html();
$.post("<%=request.getContextPath()%>/xxxxAdmin/savexxxxDialog.htm", {
"id": id,
"content": content,
},
function(data) {
if (data !== 0 && data !== null) {
$.messager.alert("提示", "增加文章成功!");
} else {
$.messager.alert("提示", "增加文章失败!");
return false;
}
}).complete(function() {
$("#form").form('clear');
editor.html("");
$("#addArticalDialog").dialog("close");
//刷新页面
url = "<%=request.getContextPath() %>/XXXAdmin/XXXForGrid.htm";
$('#dg').datagrid('options').queryParams.dNum = dNum;
$('#dg').datagrid('options').queryParams.aId = aCId;
$('#dg').datagrid('reload', url);
});
}
},
{
text: '取消',
handler: function() {
$("#addxxxxDialog").dialog("close");
}
}]
});
$("#form").form('clear');
editor.html("");
$("#addxxxxDialog").dialog("open");
} else {
$.messager.alert("提示", "当前层级不允许新增内容!");
}
} else {
$.messager.alert("提示", "当前层级不允许新增内容!");
}
}
</script>
然后是html页面
<div id="addArticalDialog" class="easyui-dialog" closed="true">
<form action=" " method="post" name="form" id="form" enctype="multipart/form-data">
<table width="90%" border="0" cellpadding="0" cellspacing="1" class="list_border_bg">
<tr>
<td height="28" align="right" class="list_left_title">文章标题:</td>
<td height="28" class="list_cell_bg">
<input type="text" name="title" id="title" value="${requestScope.ar.title }" size="40" />
</td>
</tr>
<tr>
<td height="28" colspan="4" align="left" class="list_left_title">
<div align="center">
<textarea id="editor_id" name="editor_id" style="width:1024px;height:500px;">
</textarea>
</div>
</td>
</tr>
<tr>
<td>
<input type="hidden" value="${requestScope.ar.id }" name="id" id="id"/>
</td>
</tr>
</table>
</form>
</div>
controller部分
@RequestMapping(value = "/uploadfj")
public String uploadfj( HttpServletRequest request,HttpServletResponse response, ModelMap modelmap) throws Exception {
PrintWriter writer = response.getWriter();
DESPlus des = new DESPlus();
try {
// 文件保存路径
String saveUrl = "";
// 定义允许上传的文件扩展名
HashMap<String, String> extMap = new HashMap<String, String>();
extMap.put("image", "gif,jpg,jpeg,png,bmp");
extMap.put("flash", "swf,flv");
extMap.put("media", "swf,flv,mp3,wav,wma,wmv,mid,avi,mpg,asf,rm,rmvb");
extMap.put("file", "doc,docx,xls,xlsx,ppt,htm,html,txt,zip,rar,gz,bz2");
// 最大文件大小
long maxSize = 1024*1024*2;
response.setContentType("text/html; charset=UTF-8");
if (!ServletFileUpload.isMultipartContent(request)) {
writer.println(getError("请选择文件!!!!。"));
return null;
}
String dirName = request.getParameter("dir");
if (dirName == null) {
dirName = "image";
}
if (!extMap.containsKey(dirName)) {
writer.println(getError("目录名不正确。"));
return null;
}
//读取文件
MultipartHttpServletRequest mRequest = (MultipartHttpServletRequest) request;
Map<String, MultipartFile> fileMap = mRequest.getFileMap();
//文件名
String fileName = null;
for (Iterator<Map.Entry<String, MultipartFile>> it = fileMap.entrySet().iterator(); it.hasNext();) {
Map.Entry<String, MultipartFile> entry = it.next();
MultipartFile mFile = entry.getValue();
//原始名称
fileName = mFile.getOriginalFilename();
// 检查上传文件大小
if (mFile.getSize() > maxSize) {
writer.println(getError("上传文件大小超过限制。"));
return null;
}
//截取文件类型
String fileExt = fileName.substring(fileName.lastIndexOf(".")+1);
if (!Arrays.<String> asList(extMap.get(dirName).split(",")).contains(fileExt)) {
writer.println(getError("上传文件扩展名是不允许的扩展名。n只允许" + extMap.get(dirName) + "格式。"));
return null;
}
InputStream is = mFile.getInputStream();
int articlefileid = (int)this.articleClassService.getAutoArticleFileId();//获取当前文章的ID用来做Key 没有就用个自增的
String fileKey = articlefileid;//文件key
this.articleClassService.upFileByOss(PHOTOBUCKETNAME, fileKey, is,fileName);//上传到OSS 并设置下载名称为fileName
String rswbBucket = AliyunOss.getRswbBucket();
String endPonint = AliyunOss.getEndpoint().replace("http://", "");
saveUrl ="http://"+rswbBucket+"."+endPonint+"/"+articlefileid;
//将相关信息存储到article_file表中
JSONObject obj = new JSONObject();
obj.put("error", 0);
obj.put("url", saveUrl);
obj.put("title", fileName);// 修改js文件进行,设置自动设置title ,文件说明。
writer.println(obj.toString());
}
}
catch (Exception ex) {
writer.println(getError(ex.toString()));
return null;
}
return null;
}
private String getError(String message) {
JSONObject obj = new JSONObject();
obj.put("error", 1);
obj.put("message", message);
return obj.toString();
}
其它就不贴了 警醒自己就够了
弄清楚:在上传的时候oss需要一个永不重复的Key,最好的就是自增的ID,如果没有就自己写一个seqence,文件上传成功之后,需要返回url,这个url会以超链接的方式展示到文章内容中,如果想设置这个url的title,需要修改相应的js文件,修改之后在后台,将title用put 放到返回得json中,