让ＣＫＥＤＩＴＯＲ支持ＪＳＰ上传

很早以前就想把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  阅读(4437)  评论(0)  编辑  收藏  举报