思路是:
准备一下JSP上传文件的JAR包:commons-fileupload.jar和commons-io.jar
编写一个JSP用于接收上传的文件(这里除上传图片功能外,需调用一个核心JS语句)
编写一个JSP用于浏览文件(这里除上传图片功能外,需调用一个核心JS语句)
修改CKEditor的config.js,将上传文件和浏览文件的JSP配置进去.
接收上传的文件的JSP:
Java代码
JSP上传文件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 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("");
break;
}
}
}
%>
用于浏览文件的JSP:
Java代码
pageEncoding="GB18030"%>
图片浏览//这段函数是重点,不然不能和CKEditor互动了
function funCallback(funcNum,fileUrl){
var parentWindow = ( window.parent == window ) ? window.opener : window.parent;
parentWindow.CKEDITOR.tools.callFunction(funcNum, fileUrl);
window.close();
}
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("");
}
}else{
out.println("
未检测到资源。
");}
%>
修改后的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.tools.callFunction方法。
效果图: