ckeditor是一款富文本编辑器，类似于论坛帖子下边的回复输入框。

---

1、先要下载相应js文件，点我下载。根据自己的需求选择插件的丰富程度，下载后解压得到一个文件夹，放到webRoot目录下。

2、在jsp页面或html页面引入核心js。

 <ｓｃｒｉｐｔ type="text/javaｓｃｒｉｐｔ" src="ckeditor/ckeditor.js"></ｓｃｒｉｐｔ>

• 1

3、在需要引入富文本的地方加入一个textarea标签。

 <textarea name="ckeditor"></textarea></td>

• 1

4、注意name属性，然后在页面中加下下面js代码，效果就出来了。

 <ｓｃｒｉｐｔ> CKEDITOR.replace('ckeditor'); </ｓｃｒｉｐｔ>

• 1
• 2
• 3

5、很简单，但是此时我们发现，编辑器上的上传图片功能没有。所以代码需要改成下面这样。

 <ｓｃｒｉｐｔ> CKEDITOR.replace('afficheContent',{ filebrowserImageUploadUrl : '${ctx}/uploadImg/uploadImg', language : 'zh-cn', }); </ｓｃｒｉｐｔ>

• 1
• 2
• 3
• 4
• 5
• 6

6、这里的filebrowserImageUploadUrl 是我写的一个上传图片的接口，代码如下。

 @Controller @RequestMapping("uploadImg") public class FileUploadController { /* * 图片命名格式 */ private static final String DEFAULT_SUB_FOLDER_FORMAT_AUTO = "yyyyMMddHHmmss"; protected Logger logger = Logger.getLogger(FileUploadController.class); /* * 上传图片文件夹 */ private static final String UPLOAD_PATH = "/upload/CKimg/"; /* * 上传图片 */ @RequestMapping(value = "uploadImg") public void uplodaImg(@RequestParam("upload") MultipartFile file,// HttpServletRequest request, // HttpServletResponse response)// { try { String proPath = request.getSession().getServletContext() .getRealPath("/"); String proName = request.getContextPath(); String path = proPath + UPLOAD_PATH; PrintWriter out = response.getWriter(); String CKEditorFuncNum = request.getParameter("CKEditorFuncNum"); String fileName = file.getOriginalFilename(); String uploadContentType = file.getContentType(); String expandedName = ""; if (uploadContentType.equals("image/pjpeg") || uploadContentType.equals("image/jpeg")) { // IE6上传jpg图片的headimageContentType是image/pjpeg，而IE9以及火狐上传的jpg图片是image/jpeg expandedName = ".jpg"; } else if (uploadContentType.equals("image/png") || uploadContentType.equals("image/x-png")) { // IE6上传的png图片的headimageContentType是"image/x-png" expandedName = ".png"; } else if (uploadContentType.equals("image/gif")) { expandedName = ".gif"; } else if (uploadContentType.equals("image/bmp")) { expandedName = ".bmp"; } else { out.println("<ｓｃｒｉｐｔ type="text/javaｓｃｒｉｐｔ">"); out.println("window.parent.CKEDITOR.tools.callFunction(" + CKEditorFuncNum + ",''," + "'文件格式不正确（必须为.jpg/.gif/.bmp/.png文件）');"); out.println("</ｓｃｒｉｐｔ>"); return; } if (file.getSize() > 1024 * 1024 * 2) { out.println("<ｓｃｒｉｐｔ type="text/javaｓｃｒｉｐｔ">"); out.println("window.parent.CKEDITOR.tools.callFunction(" + CKEditorFuncNum + ",''," + "'文件大小不得大于2M');"); out.println("</ｓｃｒｉｐｔ>"); return; } DateFormat df = new SimpleDateFormat(DEFAULT_SUB_FOLDER_FORMAT_AUTO); fileName = df.format(new Date()) + expandedName; file.transferTo(new File(path + "/" + fileName)); out.println("<ｓｃｒｉｐｔ type="text/javaｓｃｒｉｐｔ">"); out.println("window.parent.CKEDITOR.tools.callFunction(" + CKEditorFuncNum + ",'" + proName + "/upload/CKimg/" + fileName + "','')"); out.println("</ｓｃｒｉｐｔ>"); return; } catch (IllegalStateException e) { e.printStackTrace(); } catch (IOException e) { e.printStackTrace(); } catch (Exception e) { e.printStackTrace(); } }

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21
• 22
• 23
• 24
• 25
• 26
• 27
• 28
• 29
• 30
• 31
• 32
• 33
• 34
• 35
• 36
• 37
• 38
• 39
• 40
• 41
• 42
• 43
• 44
• 45
• 46
• 47
• 48
• 49
• 50
• 51
• 52
• 53
• 54
• 55
• 56
• 57
• 58
• 59
• 60
• 61
• 62
• 63
• 64
• 65
• 66
• 67
• 68
• 69
• 70
• 71
• 72
• 73
• 74
• 75
• 76
• 77
• 78
• 79

至此，所有功能都已经实现。