SpringMVC中使用富文本编辑器Simditor上传图片

Simditor是Tower开源的所见即所得的在线富文本编辑器。Simditor的理念是保持简单，避免过度的功能，每一个特性都追求极致的用户体验。同时，Simditor也很容易扩展。

SinDitor的使用很简单

在你的html页面中引用如下文件：


<link media="all" rel="stylesheet" type="text/css" href="styles/simditor.css" />

<script type="text/javascript" src="scripts/jquery-2.0.3.js"></script>
<script type="text/javascript" src="scripts/module.js"></script>
<script type="text/javascript" src="scripts/uploader.js"></script>
<script type="text/javascript" src="scripts/simditor.js"></script>

可是上传图片就比较蛋疼

先来初始化编辑器

$(function () {
       //var editor = new Simditor({ textarea:$('#Editor')});
       toolbar = ['title', 'bold', 'italic','underline', 'strikethrough',
           'color','|', 'ol', 'ul', 'blockquote', 'code', 'table', '|',
           'link','image', 'hr', '|', 'indent', 'outdent'];//设置工具栏
       var editor = new Simditor({
           textarea:$('#Editor'),
          placeholder: '这里输入内容...',
           toolbar:toolbar,  //工具栏 
          defaultImage: '/Content/SimDetor/images/image.png',//编辑器插入图片时使用的默认图片 
           upload:{
              url: 'uploadImg.do',//文件上传的接口地址 
              params: null,//键值对,指定文件上传接口的额外参数,上传的时候随文件一起提交 
              fileKey: 'fileDataFileName',//服务器端获取文件数据的参数名 
              connectionCount: 3,
              leaveConfirm: '正在上传文件'
           }
       });
    });

然后写个SpringMVC的Controller

@RequestMapping("imgUpload")
public void ImgUpload(@RequestParam("fileData") CommonsMultipartFile fileData ,HttpServletRequest req ,HttpServletResponse res) {

InputStream img=null;

OutputStream out = null;

PrintWriter print=null;

res.setCharacterEncoding("UTF-8");

try {

print = res.getWriter();

//时间戳
String imgType = fileData.getOriginalFilename().toLowerCase().split("\\.")[1];

if(imgType.equals("jpg")||imgType.equals("png")||imgType.equals("gif")||imgType.equals("jpeg")){

//图片不得小于2m

if(fileData.getSize()<2048000){

String imgName = System.currentTimeMillis()+"."+imgType; //更改图片名称

String dateDir = "uploads/"+new SimpleDateFormat("YYYYMMdd").format(new Date());

String path = req.getRealPath("/admin")+"/"+dateDir; //绝对目录存放图片

String imgRealPath = dateDir+"/"+imgName; //相对路径

File dir = new File(path);

//目录不存在就创建目录

if(!dir.exists()) dir.mkdir();

img = fileData.getInputStream(); //获取文件流

File file = new File(path,imgName);

out = new FileOutputStream(file);

byte[] buffer = new byte[400];

int len = 0;

while((len=img.read(buffer)) != -1){

out.write(buffer,0,len);

}
msg="{ \"success\":true,\"msg\": \"图片上传成功!\",\"file_path\":\""+imgRealPath+"\"}";

}else{

msg="{ \"success\": false,\"msg\": \"文件不得超出2MB!\",\"file_path\":\"null\"}";

}

}else{

msg="{ \"success\":false,\"msg\": \"文件只能为jpg|png|gif 中的一种!\",\"file_path\":\"null\"}";

}

} catch (IOException e) {

msg="{ \"success\": false,\"msg\": \"图片上传失败! \",\"file_path\":\null\"}";

e.printStackTrace();

} finally{

try {

if(out!=null) out.close();

if(img!=null) img.close();

} catch (IOException e) {

e.printStackTrace();

}

}

print.print(msg); //返回ijson

}