让CKEDITOR支持JSP上传

很早以前就想把CKEditor在JSP下的图片上传及浏览服务器图片的方法写下来了,不过因为教学项目中要用到,担心HEM直接套用,自己不去调查(我可是用心良苦啊),不能很好的锻炼,一直没写出来,今天项目开始测试了,他们的功能也都基本可以结束了,我也可以发我的帖了。

写这个的起因是在网上一仁兄的帖子,抱怨说CKEditor不支持JSP了,感叹了许多,说支持ASP、PHP,就是不支持JSP,于是俺也在网上找了找JSP方面的资料,看来确实不支持了,不过人家也是有道理的,毕竟JSP上传的图片,不能简单的用个JSP就随便搞搞就O了。

关于CKEditor在JSP下上传图片的方法,网上有很多,大都是写了一大堆JS代码然后自己注册一个事件,写的太多,我没怎么看懂,不过有一位大侠写的让我看到了简单写法的曙光(不过遗憾的是,时间太长了,不知道大侠的URL了)。

言归正传,对于上传CKEditor已经做好了,我们只要准备个功能,接收CKEditor提交过来的文件就可以了,所以呢实现的思路是:

 

  1. 准备一下JSP上传文件的JAR包:commons-fileupload.jar和commons-io.jar
  2. 编写一个JSP用于接收上传的文件(这里除上传图片功能外,需调用一个核心JS语句)
  3. 编写一个JSP用于浏览文件(这里除上传图片功能外,需调用一个核心JS语句)
  4. 修改CKEditor的config.js,将上传文件和浏览文件的JSP配置进去

说明一下,之所以采用JSP没有使用Servlet,那是因为JSP简单啊,这样可以降低CKEditor对项目的侵入性啊。下面看代码啦:

用于接收上传的文件的JSP:

Java代码 复制代码 收藏代码
  1. <%@page import="java.io.File"%>   
  2. <%@page import="java.util.UUID"%>   
  3. <%@page import="org.apache.commons.fileupload.FileItem"%>   
  4. <%@page import="java.util.List"%>   
  5. <%@page import="org.apache.commons.fileupload.disk.DiskFileItemFactory"%>   
  6. <%@page import="org.apache.commons.fileupload.FileItemFactory"%>   
  7. <%@page import="org.apache.commons.fileupload.servlet.ServletFileUpload"%>   
  8. <%@ page language="java" contentType="text/html; charset=GB18030" pageEncoding="GB18030"%>   
  9. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">   
  10. <html>   
  11. <head>   
  12. <meta http-equiv="Content-Type" content="text/html; charset=GB18030">   
  13. <meta http-equiv="pragma" content="no-cache">   
  14. <meta http-equiv="cache-control" content="no-cache">   
  15. <meta http-equiv="expires" content="0">   
  16. <title>JSP上传文件</title>   
  17. </head>   
  18. <body>   
  19. <%   
  20. String path = request.getContextPath() + "/";   
  21. if(ServletFileUpload.isMultipartContent(request)){   
  22.     String type = "";   
  23.     if(request.getParameter("type") != null)//获取文件分类   
  24.         type = request.getParameter("type").toLowerCase() + "/";   
  25.     String callback = request.getParameter("CKEditorFuncNum");//获取回调JS的函数Num   
  26.     FileItemFactory factory = new DiskFileItemFactory();   
  27.     ServletFileUpload servletFileUpload = new ServletFileUpload(factory);   
  28.     servletFileUpload.setHeaderEncoding("UTF-8");//解决文件名乱码的问题   
  29.     List<FileItem> fileItemsList = servletFileUpload.parseRequest(request);   
  30.     for (FileItem item : fileItemsList) {   
  31.         if (!item.isFormField()) {   
  32.             String fileName = item.getName();   
  33.             fileName = "file" + System.currentTimeMillis() + fileName.substring(fileName.lastIndexOf("."));   
  34.             //定义文件路径,根据你的文件夹结构,可能需要做修改   
  35.             String clientPath = "ckeditor/uploader/upload/" + type + fileName;   
  36.   
  37.             //保存文件到服务器上   
  38.             File file = new File(request.getSession().getServletContext().getRealPath(clientPath));   
  39.             if (!file.getParentFile().exists()) {   
  40.                 file.getParentFile().mkdirs();   
  41.             }   
  42.             item.write(file);   
  43.   
  44.             //打印一段JS,调用parent页面的CKEditor的函数,传递函数编号和上传后文件的路径;这句很重要,成败在此一句   
  45.             out.println("<script type='text/javascript'>window.parent.CKEDITOR.tools.callFunction("+callback+",'"+path+clientPath+"')</script>");   
  46.             break;   
  47.         }   
  48.     }   
  49. }   
  50.  %>   
  51. </body>   
  52. </html>  

用于浏览文件的JSP:

Java代码 复制代码 收藏代码
  1. <%@page import="java.io.File"%>   
  2. <%@ page language="java" contentType="text/html; charset=GB18030"  
  3.     pageEncoding="GB18030"%>   
  4. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">   
  5. <html>   
  6. <head>   
  7. <meta http-equiv="Content-Type" content="text/html; charset=GB18030">   
  8. <meta http-equiv="pragma" content="no-cache">   
  9. <meta http-equiv="cache-control" content="no-cache">   
  10. <meta http-equiv="expires" content="0">   
  11. <title>图片浏览</title>   
  12. <script type="text/javascript">   
  13. //这段函数是重点,不然不能和CKEditor互动了   
  14. function funCallback(funcNum,fileUrl){   
  15.     var parentWindow = ( window.parent == window ) ? window.opener : window.parent;   
  16.     parentWindow.CKEDITOR.tools.callFunction(funcNum, fileUrl);   
  17.     window.close();   
  18. }   
  19. </script>   
  20. </head>   
  21. <body>   
  22. <%   
  23.     String path = request.getContextPath() + "/";   
  24.     String type = "";   
  25.     if(request.getParameter("type") != null)//获取文件分类   
  26.         type = request.getParameter("type").toLowerCase() + "/";   
  27.     String clientPath = "ckeditor/uploader/upload/" + type;   
  28.     File root = new File(request.getSession().getServletContext().getRealPath(clientPath));   
  29.     if(!root.exists()){   
  30.         root.mkdirs();   
  31.     }   
  32.     String callback = request.getParameter("CKEditorFuncNum");   
  33.     File[] files = root.listFiles();   
  34.     if(files.length > 0){   
  35.         for(File file:files ) {   
  36.             String src = path + clientPath + file.getName();   
  37.             out.println("<img width='110px' height='70px' src='" + src + "' alt='" + file.getName() + "' onclick=\"funCallback("+callback+",'"+ src +"')\">");   
  38.         }   
  39.     }else{   
  40.         out.println("<h3>未检测到资源。</h3>");   
  41.     }   
  42.  %>   
  43. </body>   
  44. </html>  

修改后的CKEditor的config.js: 

Js代码 复制代码 收藏代码
  1. CKEDITOR.editorConfig = function( config )   
  2. {   
  3.     config.language = 'zh-cn';   
  4.     config.filebrowserBrowseUrl = 'ckeditor/uploader/browse.jsp';   
  5.     config.filebrowserImageBrowseUrl = 'ckeditor/uploader/browse.jsp?type=Images';   
  6.     config.filebrowserFlashBrowseUrl = 'ckeditor/uploader/browse.jsp?type=Flashs';   
  7.     config.filebrowserUploadUrl = 'ckeditor/uploader/upload.jsp';   
  8.     config.filebrowserImageUploadUrl = 'ckeditor/uploader/upload.jsp?type=Images';   
  9.     config.filebrowserFlashUploadUrl = 'ckeditor/uploader/upload.jsp?type=Flashs';   
  10.     config.filebrowserWindowWidth = '640';   
  11.     config.filebrowserWindowHeight = '480';   
  12. }  

OK,修改完毕。简单吧,其实上传和浏览文件很简单(上面只是一个演示,代码仅供参考),要点是要调用一下CKEDITOR.tools.callFunction方法。

附件打包了一个可运行的Eclipse工程,供需要的朋友参考。

---------------------------------------------------------------------------------------

图片预览:

文件夹结构截图


上传效果截图:



 
 

  • 大小: 17 KB

 

posted @ 2011-07-29 22:34  hannover  阅读(4265)  评论(0编辑  收藏