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

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

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

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

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

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

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

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

Java代码

<%@page import="java.io.File"%>
<%@page import="java.util.UUID"%>
<%@page import="org.apache.commons.fileupload.FileItem"%>
<%@page import="java.util.List"%>
<%@page import="org.apache.commons.fileupload.disk.DiskFileItemFactory"%>
<%@page import="org.apache.commons.fileupload.FileItemFactory"%>
<%@page import="org.apache.commons.fileupload.servlet.ServletFileUpload"%>
<%@ page language="java" contentType="text/html; charset=GB18030" pageEncoding="GB18030"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GB18030">
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<title>JSP上传文件</title>
</head>
<body>
<%
String path = request.getContextPath() + "/";
if(ServletFileUpload.isMultipartContent(request)){
String type = "";
if(request.getParameter("type") != null)//获取文件分类
type = request.getParameter("type").toLowerCase() + "/";
String callback = request.getParameter("CKEditorFuncNum");//获取回调JS的函数Num
FileItemFactory factory = new DiskFileItemFactory();
ServletFileUpload servletFileUpload = new ServletFileUpload(factory);
servletFileUpload.setHeaderEncoding("UTF-8");//解决文件名乱码的问题
List<FileItem> fileItemsList = servletFileUpload.parseRequest(request);
for (FileItem item : fileItemsList) {
if (!item.isFormField()) {
String fileName = item.getName();
fileName = "file" + System.currentTimeMillis() + fileName.substring(fileName.lastIndexOf("."));
//定义文件路径，根据你的文件夹结构，可能需要做修改
String clientPath = "ckeditor/uploader/upload/" + type + fileName;
//保存文件到服务器上
File file = new File(request.getSession().getServletContext().getRealPath(clientPath));
if (!file.getParentFile().exists()) {
file.getParentFile().mkdirs();
}
item.write(file);
//打印一段JS，调用parent页面的CKEditor的函数，传递函数编号和上传后文件的路径；这句很重要，成败在此一句
out.println("<script type='text/javascript'>window.parent.CKEDITOR.tools.callFunction("+callback+",'"+path+clientPath+"')</script>");
break;
}
}
}
%>
</body>
</html>

用于浏览文件的JSP：


Java代码  




<%@page import="java.io.File"%>   


<%@ page language="java" contentType="text/html; charset=GB18030"  


    pageEncoding="GB18030"%>   


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">   

<html>   
<head>   

<meta http-equiv="Content-Type" content="text/html; charset=GB18030">   


<meta http-equiv="pragma" content="no-cache">   


<meta http-equiv="cache-control" content="no-cache">   


<meta http-equiv="expires" content="0">   

<title>图片浏览</title>   

<script type="text/javascript">   


//这段函数是重点，不然不能和CKEditor互动了   

function funCallback(funcNum,fileUrl){   
    var parentWindow = ( window.parent == window ) ? window.opener : window.parent;   
    parentWindow.CKEDITOR.tools.callFunction(funcNum, fileUrl);   
    window.close();   
}   
</script>   
</head>   
<body>   
<%   

    String path = request.getContextPath() + "/";   


    String type = "";   


    if(request.getParameter("type") != null)//获取文件分类   


        type = request.getParameter("type").toLowerCase() + "/";   


    String clientPath = "ckeditor/uploader/upload/" + type;   


    File root = new File(request.getSession().getServletContext().getRealPath(clientPath));   


    if(!root.exists()){   

        root.mkdirs();   
    }   

    String callback = request.getParameter("CKEditorFuncNum");   

    File[] files = root.listFiles();   

    if(files.length > 0){   


        for(File file:files ) {   

            String src = path + clientPath + file.getName();   

            out.println("<img width='110px' height='70px' src='" + src + "' alt='" + file.getName() + "' onclick=\"funCallback("+callback+",'"+ src +"')\">");   

        }   

    }else{   


        out.println("<h3>未检测到资源。</h3>");   

    }   
 %>   
</body>   
</html>  


修改后的CKEditor的config.js： 


Js代码  




CKEDITOR.editorConfig = function( config )   

{   

    config.language = 'zh-cn';   


    config.filebrowserBrowseUrl = 'ckeditor/uploader/browse.jsp';   


    config.filebrowserImageBrowseUrl = 'ckeditor/uploader/browse.jsp?type=Images';   


    config.filebrowserFlashBrowseUrl = 'ckeditor/uploader/browse.jsp?type=Flashs';   


    config.filebrowserUploadUrl = 'ckeditor/uploader/upload.jsp';   


    config.filebrowserImageUploadUrl = 'ckeditor/uploader/upload.jsp?type=Images';   


    config.filebrowserFlashUploadUrl = 'ckeditor/uploader/upload.jsp?type=Flashs';   


    config.filebrowserWindowWidth = '640';   


    config.filebrowserWindowHeight = '480';   

}  


CKEDITOR.editorConfig = function( config )
{
	config.language = 'zh-cn';
	config.filebrowserBrowseUrl = 'ckeditor/uploader/browse.jsp';
	config.filebrowserImageBrowseUrl = 'ckeditor/uploader/browse.jsp?type=Images';
	config.filebrowserFlashBrowseUrl = 'ckeditor/uploader/browse.jsp?type=Flashs';
	config.filebrowserUploadUrl = 'ckeditor/uploader/upload.jsp';
	config.filebrowserImageUploadUrl = 'ckeditor/uploader/upload.jsp?type=Images';
	config.filebrowserFlashUploadUrl = 'ckeditor/uploader/upload.jsp?type=Flashs';
	config.filebrowserWindowWidth = '640';
	config.filebrowserWindowHeight = '480';
}
OK，修改完毕。简单吧，其实上传和浏览文件很简单（上面只是一个演示，代码仅供参考），要点是要调用一下CKEDITOR.tools.callFunction方法。
附件打包了一个可运行的Eclipse工程，供需要的朋友参考。
---------------------------------------------------------------------------------------
图片预览：
文件夹结构截图


上传效果截图：

ckediter.rar (832.7 KB)