让CKEditor支持JSP文件下传

让CKEditor支持JSP文件上传

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

写这个的起因是在网上一仁兄的帖子，抱怨说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：

<%@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：

<%@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：

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工程，供需要的朋友参考。

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

图片预览：

文件夹结构截图

让CKEditor支持JSP文件下传

上传效果截图：

让CKEditor支持JSP文件下传

2 楼 zywang 2010-09-11

CKEditor

xia9527 写道

无法显示图片！
能上传到服务器上，
图片无法正常显示到CKEditor里面！

只能建议你调试一下吧让CKEditor支持JSP文件下传

3 楼 306963591 2010-10-19

不错，搞定了！支持

4 楼 liuxh3 2010-11-19

thank you very much ~~

5 楼 supben 2010-12-06

赞一个！我记得我原来改的，又是加servlet又是改配置，设计到接近10个地方，非常的复杂，楼主的这个版本侵入性很低。以后ckeditor的版本升级也可以随时跟进。

不过我有个问题，IE8，一直报ckeditor.js拒绝访问的错，火狐没问题！
而且我上ckeditor官网，用IE，所有的demo都看不了，和我本地的效果一样！
为什么？与js文件编码是utf-8+ （bom）有关系？
我最纳闷的是，难道作者他们不知道IE8不支持，这么大的问题！
难道故意的，支持IE8的要付费？

盼楼主回音

6 楼 zywang 2010-12-07

supben 写道

我电脑上用的就是IE8，没有出现你说的情况啊，是不是你的IE坏了啊让CKEditor支持JSP文件下传

7 楼 chinahnzhou 2010-12-09

楼主好人。

8 楼 supben 2010-12-12

zywang 写道

supben 写道

我电脑上用的就是IE8，没有出现你说的情况啊，是不是你的IE坏了啊让CKEditor支持JSP文件下传

恩，我另外一台机器没事。。。。

9 楼 yhanliang 2010-12-29

10 楼 LD_21 2011-03-22

好像使用在struts2中就不行了啊，除非把web.xml中filter-mapping的url-pattern从 /* 改为 *.action ，请问楼主有没更好的解决方式？？

11 楼 zywang 2011-03-23

LD_21 写道

好像使用在struts2中就不行了啊，除非把web.xml中filter-mapping的url-pattern从 /* 改为 *.action ，请问楼主有没更好的解决方式？？

这需要对上面的代码进行修改，将我写在JSP中的Java代码迁移到Struts的Action中，同时将CKEditor的config.js中的URL指向该Action；当然上传文件的代码也可以按照Struts的方式进行上传。总的来说，是JSP还是Action不是重点，重点是你要能执行CKEDITOR.tools.callFunction这段JS代码

12 楼 Ayin2767 2011-04-20

用了，太强了，谢谢！楼主

13 楼 zywang 2011-04-20

Ayin2767 写道

用了，太强了，谢谢！楼主

客气，略尽绵薄之力

14 楼夕雨下 2011-06-15

LZ你太给力了，谢谢啊

15 楼 passlicense 2011-09-05

挺优雅的方法啊。网络上其他的方法太复杂了！！

16 楼 passlicense 2011-09-05

问题1：但是不能选择其他路径下的图片，不灵活
问题2：在ie下点击上传图片的时候，窗口都没跳出来
请问楼主是怎么回事啊？？

17 楼 coolzhi 2011-12-12

还有一种做法是可以将fckeditor的文件上传管理器移植过来就可以用了，详细情况可以看文章《ckeditor用fckeditor的文件管理器实现图片上传》

如果嫌弃fckeditor文件管理器不好看的话，还可以使用很多开源的可集成到ckeditor的文件管理器。。包括kfm、filemanager等。

18 楼 Mojarra 2012-03-29

不错，很详细，可以研究研究，收藏一下

19 楼 yinli1108 2012-05-08

LZ您好，谢谢你的代码，但是我遇到一点小问题，当上传的不是图片的话，显示在编辑器的内容是个红色的小马叉，就如同我们点击网页图片未加载成功的样子，必须手动del才可以，另外有什么方式让我上传的HTML 能够在编辑器里面显示呢？谢谢，盼回复！

20 楼 guomi2004 2012-05-19

果然好方法，感谢

21 楼搞基园长 2012-06-18

楼主可能放是没有见过JSP WEBSHELL 所以敢不判断上传格式

让CKEditor支持JSP文件下传

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

用于浏览文件的JSP：

修改后的CKEditor的config.js：

相关推荐