CKEditor的使用，并实现图片上传
ckeditor是一款富文本编辑器，类似于论坛帖子下边的回复输入框。
1、先要下载相应js文件，点我下载。根据自己的需求选择插件的丰富程度，下载后解压得到一个文件夹，放到webRoot目录下。
2、在jsp页面或html页面引入核心js。
<script type="text/javascript" src="ckeditor/ckeditor.js"></script>
3、在需要引入富文本的地方加入一个textarea标签。
<textarea name="ckeditor"></textarea></td>
4、注意name属性，然后在页面中加下下面js代码，效果就出来了。
<script> CKEDITOR.replace('ckeditor'}); </script>
5、很简单，但是此时我们发现，编辑器上的上传图片功能没有。所以代码需要改成下面这样。
<script> CKEDITOR.replace('ckeditor',{ filebrowserImageUploadUrl : '${ctx}/uploadImg/uploadImg', language : 'zh-cn', }); </script>
6、这里的filebrowserImageUploadUrl 是我写的一个上传图片的接口，代码如下。
1 @Controller 2 @RequestMapping("uploadImg") 3 public class FileUploadController { 4 /* 5 * 图片命名格式 6 */ 7 private static final String DEFAULT_SUB_FOLDER_FORMAT_AUTO = "yyyyMMddHHmmss"; 8 9 protected Logger logger = Logger.getLogger(FileUploadController.class); 10 11 /* 12 * 上传图片文件夹 13 */ 14 private static final String UPLOAD_PATH = "/upload/CKimg/"; 15 16 /* 17 * 上传图片 18 */ 19 @RequestMapping(value = "uploadImg") 20 public void uplodaImg(@RequestParam("upload") MultipartFile file,// 21 HttpServletRequest request, // 22 HttpServletResponse response)// 23 { 24 25 try { 26 27 String proPath = request.getSession().getServletContext() 28 .getRealPath("/"); 29 String proName = request.getContextPath(); 30 String path = proPath + UPLOAD_PATH; 31 PrintWriter out = response.getWriter(); 32 String CKEditorFuncNum = request.getParameter("CKEditorFuncNum"); 33 String fileName = file.getOriginalFilename(); 34 String uploadContentType = file.getContentType(); 35 String expandedName = ""; 36 if (uploadContentType.equals("image/pjpeg") 37 || uploadContentType.equals("image/jpeg")) { 38 // IE6上传jpg图片的headimageContentType是image/pjpeg，而IE9以及火狐上传的jpg图片是image/jpeg 39 expandedName = ".jpg"; 40 } else if (uploadContentType.equals("image/png") 41 || uploadContentType.equals("image/x-png")) { 42 // IE6上传的png图片的headimageContentType是"image/x-png" 43 expandedName = ".png"; 44 } else if (uploadContentType.equals("image/gif")) { 45 expandedName = ".gif"; 46 } else if (uploadContentType.equals("image/bmp")) { 47 expandedName = ".bmp"; 48 } else { 49 out.println("<script type=\"text/javascript\">"); 50 out.println("window.parent.CKEDITOR.tools.callFunction(" 51 + CKEditorFuncNum + ",''," 52 + "'文件格式不正确（必须为.jpg/.gif/.bmp/.png文件）');"); 53 out.println("</script>"); 54 return; 55 } 56 if (file.getSize() > 1024 * 1024 * 2) { 57 out.println("<script type=\"text/javascript\">"); 58 out.println("window.parent.CKEDITOR.tools.callFunction(" 59 + CKEditorFuncNum + ",''," + "'文件大小不得大于2M');"); 60 out.println("</script>"); 61 return; 62 } 63 DateFormat df = new SimpleDateFormat(DEFAULT_SUB_FOLDER_FORMAT_AUTO); 64 fileName = df.format(new Date()) + expandedName; 65 file.transferTo(new File(path + "/" + fileName)); 66 out.println("<script type=\"text/javascript\">"); 67 out.println("window.parent.CKEDITOR.tools.callFunction(" 68 + CKEditorFuncNum + ",'" + proName + "/upload/CKimg/" 69 + fileName + "','')"); 70 out.println("</script>"); 71 return; 72 } catch (IllegalStateException e) { 73 e.printStackTrace(); 74 } catch (IOException e) { 75 e.printStackTrace(); 76 } catch (Exception e) { 77 e.printStackTrace(); 78 } 79 }
至此，所有功能都已经实现。
