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

字体大小: 中小 标准 ->行高大小: 标准 中 大

很早以前就想把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;
  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);
  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

 

此文章由 http://www.ositren.com 收集整理 ,地址为: http://www.ositren.com/htmls/69117.html