用summernote编辑器的好处是因为可以自适应，手机也可以自适应，很方便，编辑器本身也有自带的图片上传，不过不方便，还是自己写一个异步上传的方法
具体如下：
前端页面代码：
<tr class="">
<td>沟通内容：</td>
<td><textarea class="form-control" id="summernote" name="content" cols="60" rows="10"></textarea> </td>
</tr>
js代码：
<script type="text/javascript">
$(function(){
$('#summernote').summernote({
height: 300, //定义初始高度
lang: 'zh-CN', // default: 'en-US'
focus:true,
toolbar: [
['style', ['bold', 'italic', 'underline', 'clear']],
['fontsize', ['fontsize']],
['color', ['color']],
['para', ['ul', 'ol', 'paragraph']],
['height', ['height']],
['insert', ['picture', 'video']]
],
callbacks: {
onImageUpload: function(files, editor, $editable) {
sendFile(files[0],editor,$editable);
}
}
});
function sendFile(file, editor, $editable){
var filename = false;
try{
filename = file['name'];
} catch(e){
filename = false;
}
if(!filename){$(".note-alarm").remove();}
//以上防止在图片在编辑器内拖拽引发第二次上传导致的提示错误
var ext = filename.substr(filename.lastIndexOf("."));
ext = ext.toUpperCase();// 验证图片类型
var timestamp = new Date().getTime();
var name = timestamp+"_"+$("#summernote").attr('aid')+ext;
//name是文件名，自己随意定义，aid是我自己增加的属性用于区分文件用户
data = new FormData();
data.append("file", file);
data.append("key",filename);
data.append("token",$("#summernote").attr('token'));
$.ajax({
data: data,
type: "POST",
url: "${pageContext.request.contextPath}/admin/customerRecord_upload.do", //图片上传出来的url，返回的是图片上传后的路径，http格式
contentType: false,
cache: false,
processData: false,
success: function (data) {
var path = data.data;
$('#summernote').summernote('insertImage', path, filename);
$("img").addClass("img-responsive center-block");
},
error: function () {
alert("上传失败！");
}
});
}
});
</script>
controller层的代码
@RequestMapping(value = "/customerRecord_upload", method = RequestMethod.POST)
@ResponseBody
public Map<String,Object> uploadHandle(HttpServletRequest request,HttpServletResponse response){
Map<String,Object> map = new HashMap<String,Object>(0);
map.clear();
MultipartFile multipartFile = null;
// 转型为MultipartHttpRequest：
if(request instanceof MultipartHttpServletRequest){
MultipartHttpServletRequest multipartRequest = (MultipartHttpServletRequest) request;
// 获取对应file对象
Map<String, MultipartFile> fileMap = multipartRequest.getFileMap();
Iterator<String> fileIterator = multipartRequest.getFileNames();
while (fileIterator.hasNext()) {
String fileKey = fileIterator.next();
// 获取对应文件
multipartFile = fileMap.get(fileKey);
if (multipartFile.getSize() != 0L) {
// 日期目录
String imageDir = "admin/upload/customerRecord/" + DateUtil.dateToString(new Date(), "yyyyMMdd");
String realPath = request.getSession().getServletContext().getRealPath(imageDir);
File dir = new File(realPath);
if (!dir.exists()) {
dir.mkdirs();
}
// 获取上传文件原始名称
String fileName = multipartFile.getOriginalFilename();
// 获取文件的扩展名
String ext = fileName.substring(fileName.lastIndexOf("."));
String tmpExt = ext.toLowerCase(); // 验证图片类型
if (!tmpExt.contains(".jpg") && !tmpExt.contains(".gif") && !tmpExt.contains(".png") && !tmpExt.contains(".jpeg")) {
map.put("msg", "只能上传jpg、gif、png类型的图片。");
map.put("data", "");
return map;
}
// 重新给文件命名
String banName = String.valueOf(System.currentTimeMillis() + RandomUtil.getRandomNumber());
String newName = banName + ext;
// 封装为文件对象
File targetFile = new File(realPath, newName);
try {
// 上传文件
multipartFile.transferTo(targetFile);
//返回给前端页面的图片String path = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+request.getContextPath()+"//"+imageDir+"//"+newName;
map.put("data", path);
map.put("msg", "上传成功");
}catch(Exception e){
map.put("data", "");
map.put("msg", "上传失败");
}
}
}
}
return map;
}
这样子就OK啦，图片就自动上传到编辑器里面了，而且还可以自适应，效果如下：
这个是浏览器看手机效果
