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*/ 7private static final String DEFAULT_SUB_FOLDER_FORMAT_AUTO = "yyyyMMddHHmmss"; 8 9protected Logger logger = Logger.getLogger(FileUploadController.class);10 11/*12* 上传图片文件夹13*/14private static final String UPLOAD_PATH = "/upload/CKimg/";15 16/*17* 上传图片18*/19@RequestMapping(value = "uploadImg")20public 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/jpeg39 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}
至此，所有功能都已经实现。
2737
