很早以前就想把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：
<%@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工程，供需要的朋友参考。
---------------------------------------------------------------------------------------
图片预览：
文件夹结构截图
上传效果截图：
- 大小: 17 KB
- 大小: 31 KB
- 大小: 19.2 KB
- 大小: 44.9 KB
- 大小: 61.2 KB
分享到：
[url][/url]
[/img][img][/img]
相关推荐
在JSP（JavaServer Pages）环境中集成CKEditor，可以让用户在服务器端进行更加直观和便捷的内容创作。本资料包含了CKEditor在JSP中的应用实例，以及相关的配置和使用说明。 首先，我们来看如何在JSP中引入CKEditor...
在这个例子中，`testCkeditorUploadImg.jsp`可能包含了一个预配置好的CKEditor实例，以及相关的JavaScript代码，用于配置CKEditor的图片和文件上传功能。这部分代码可能涉及到CKEditor的配置对象，如`config....
2. `ckeditor-java-core-3.5.3.jar`：这是CKEditor Java库的核心文件，包含了CKEditor与Java交互的代码，我们需要将其添加到项目的类路径中，以便在JSP页面上使用CKEditor。 3. `ckeditor-java-core-3.5.3-sources....
3. **处理文件上传**：在JSP中，可以使用`<form>`标签来接收文件，通过`request.getParameter("CKEditorFuncNum")`获取CKEditor回调函数的编号，以便在上传成功后通知编辑器。使用`Part`接口（Java Servlet 3.0及...
ckEditor是一款非常流行的富文本编辑器，它能够提供强大的文本编辑功能，包括图片上传、格式化文本等，广泛应用于各类网站和应用中。本文将详细介绍如何在JSP页面中集成ckEditor，并通过示例代码来展示具体的实现...
总的来说，这个压缩包提供了一整套CKeditor v3.2.1 JSP增强版的解决方案，对于那些需要在Java Web环境中实现富文本编辑和文件上传功能的开发者来说，是一个非常有价值的资源。通过研究源码和实例，开发者可以深入...
总之，"jspupload.rar_ckeditor java"是一个关于如何在Java Web项目中利用CKEditor进行JSP文件上传的资源，它可能包含了一个完整的解决方案或者详细教程，对于使用CKEditor进行Web开发的程序员来说，是极具价值的...
在这个场景中，"JSP使用ckeditor和ckfinder实现富文本及文件上传"是一个常见的需求，尤其是在构建内容管理系统或者论坛等需要用户编辑和上传内容的Web应用中。 ckeditor是一款流行的开源JavaScript富文本编辑器，它...
总结来说，这个"ckeditor带上传例子 for java jsp"是一个展示如何在Java Web环境中集成CKEditor并实现文件上传功能的实例。通过部署提供的WAR文件到Tomcat服务器，你可以学习和实践如何处理CKEditor的上传请求，以及...
最后配置视频上传路径的URL路径，也就是POST上传文件的地址：config.filebrowserFlvPlayerUploadUrl = '/ckeditor/upload_json.ashx?dir=media'，注意一定要是filebrowserFlvPlayerUploadUrl，这里要对应flvPlayer...
4. **返回响应**：完成文件上传后，Action需要返回一个响应，告知CKEditor图片是否成功上传。这个响应可以是JSON格式，包含图片的URL，这样CKEditor就能在编辑器中显示上传的图片。 5. **配置Struts2**：在Struts2...
通过以上步骤，你就可以在Java Web项目中成功整合Ckeditor和ckFinder，提供一个支持文件上传的富文本编辑器。在实际开发中，你可能还需要根据项目需求进行一些定制化工作，例如调整编辑器样式、增加额外的插件等。...
CKFinder则是一个与CKEditor配套的文件管理器，用于上传、浏览和管理服务器上的文件。通过CKFinder，用户可以直接在编辑器中插入图片、文档或其他媒体文件，而无需离开编辑环境。CKFinder支持多种文件类型，并具有...
- **配置CKFinder的`baseURL`属性**以正确指向文件上传路径。 - **在CKEditor的配置中启用CKFinder插件**。这通常涉及到修改`config.js`文件，例如添加以下配置： ```javascript config.filebrowserBrowseUrl = '/...
例如，限制上传文件的类型和大小，防止恶意文件上传；对上传的图片进行缩放和优化，减少服务器存储空间和加载时间；以及使用CDN服务，提高图片加载速度。 总结，CKEDITOR编辑器的本地图片上传功能结合服务器端处理...
### 关于JSP中ckeditor...通过本文详细介绍的步骤，可以有效地将ckeditor与ckfinder整合到JSP项目中，实现文件上传、图片插入等功能。这种方法不仅提高了用户体验，还简化了开发过程中的复杂度，是非常实用的技术组合。
kcFinder是一个开源的文件管理器，它支持多语言，可以轻松集成到CKeditor中，提供文件和目录的浏览、删除、重命名等功能。 3. **路径配置**：为了使CKeditor能够正确地显示上传的图片，服务端组件需要配置正确的URL...
`testCkeditorUploadImg.jsp`是一个JSP（JavaServer Pages）文件，通常用于测试或者演示CKEditor的图片上传功能。在这个文件中，可以看到HTML和JavaScript代码，它们创建了一个CKEditor实例，并配置了图片上传的相关...