CKeditor编辑器图片上传问题

CKeditor的安装和基本使用    http://blog.csdn.net/pttaoge/article/details/76718458

这几天有搞过一个使用CKeditor进行图片上传的需求，在写功能的途中还出过一些错误，现在把这些代码贴出来，希望能够和大家一起学习

首先打开ckeditor文件夹下的config.js文件，将其修改其下面这样

//设置一些要用到的工具
CKEDITOR.editorConfig = function( config ) {
	// Define changes to default configuration here.
	// For complete reference see:
	// http://docs.ckeditor.com/#!/api/CKEDITOR.config

	// The toolbar groups arrangement, optimized for two toolbar rows.
	config.toolbarGroups = [//
		{ name: 'clipboard',   groups: [ 'clipboard', 'undo' ] },
		{ name: 'editing',     groups: [ 'find', 'selection', 'spellchecker' ] },
		{ name: 'links' },
		{ name: 'insert' },
		{ name: 'forms' },
		{ name: 'tools' },
		{ name: 'document',	   groups: [ 'mode', 'document', 'doctools' ] },
		{ name: 'others' },
		'/',
		{ name: 'basicstyles', groups: [ 'basicstyles', 'cleanup' ] },
		{ name: 'paragraph',   groups: [ 'list', 'indent', 'blocks', 'align', 'bidi' ] },
		{ name: 'styles' },
		{ name: 'colors' },
		{ name: 'about' }
	];
	
	//移除一些不必要的界面
	config.removeButtons = 'Underline,Subscript,Superscript';

	//设置一些常用的元素
	config.format_tags = 'p;h1;h2;h3;pre';

	// 简化窗口
	config.removeDialogTabs = 'image:advanced;link:advanced';
	
	//获取基地址，js可以通过它来得到基地址
	var location = (window.location+'').split('/');
	var basePath = location[0]+'//'+location[2]+'/'+location[3];
	//图片上传后要进行的操作，并且你配了它，那么就会出现上传的按钮，这个地址可以是一个servlet也可以是一个action
	config.filebrowserImageUploadUrl=basePath+"/back/uploadSinglePic.jsp"; 
};

处理图片的jsp页面

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>

<%@ page
	import="com.yc.utils.*,java.util.*"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>
<base href="<%=basePath%>" />

<%

	//这是我写的一个封装帮助类
	FileUpload fu=new FileUpload();
   	Map<String,String> map= fu.uploadFiles(pageContext, request);
	//取出回调函数名 :   jsonp技术
	response.setContentType("text/html; charset=UTF-8");
   	
   	// function show()      因为  CKEditorFuncNum参数是在地址栏中，即以  GET方式传到服务器中的，所以可以使用  HttpServletRequest来接收.
	String callback = request.getParameter("CKEditorFuncNum");
	
	//将结果以客户端指定的函数的形式，以javascript代码写到客户端去，这样客户端的   浏览器的js引擎就可以运行
	out.println("<script type=\"text/javascript\">");
	out.println("window.parent.CKEDITOR.tools.callFunction(" + callback + ",'" + basePath+map.get("upload_weburl") + "','')");
	out.println("</script>");
	out.flush();
%>

FileUpload图片上传帮助类

package com.yc.utils;

import java.io.File;


import java.io.IOException;
import java.sql.SQLException;
import java.text.SimpleDateFormat;
import java.util.Calendar;
import java.util.Date;
import java.util.Enumeration;
import java.util.HashMap;
import java.util.List;
import java.util.Map;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.jsp.PageContext;

import com.jspsmart.upload.Files;
import com.jspsmart.upload.Request;
import com.jspsmart.upload.SmartUpload;
import com.jspsmart.upload.SmartUploadException;

public class FileUpload {
	private long singleSize = 10 * 1024 * 1024;
	private String allowedFilesList="gif,jpg,jpeg,png";
	private String deniedFilesList="jsp,asp,php,aspx,html,htm,exe,bat,sh";
	private long totalFileSize=5*singleSize;
	
	private String filePath="pic";   // 存在tomcat中webapp下的文件夹的名字. 
	
	
	
	public void setFilePath(String filePath) {
		this.filePath = filePath;
	}

	public Map<String, String> uploadFiles(PageContext pageContext, HttpServletRequest request)
			throws SmartUploadException, IOException, ServletException, SQLException {
		Map<String, String> map = new HashMap<String, String>();
		SmartUpload su = new SmartUpload();
		su.initialize(pageContext); // 初始化
		su.setCharset("utf-8");
		
		
		// 定义允许上传文件类型
		su.setAllowedFilesList(allowedFilesList);
		// 不允许上传文件类型
		su.setDeniedFilesList(deniedFilesList);
		// 单个文件最大限制
		su.setMaxFileSize(singleSize);
		// 所有上传文件的总容量限制
		su.setTotalMaxFileSize(totalFileSize);
		
		
		su.upload();
		
		//取参数   Request是smartupload的request   -> HttpServletRequest
		Request re=su.getRequest();
		Enumeration<String> enu=re.getParameterNames();
		while(  enu.hasMoreElements()){
			String pn=enu.nextElement();
			map.put(pn, re.getParameter(pn));
		}
		
		
		// 取出上传的文件列表
		Files files = su.getFiles();
		int count=files.getCount();
		if(   files!=null&&count>0){
			for( int i=0;i<count;i++){
				// 取tomcat路径
				Calendar c = Calendar.getInstance();
				String tomcatdir = request.getRealPath("/"); // xxx/xxx/webapps/yc3637web1
				File tomcatFile = new File(tomcatdir);
				File webapppath = tomcatFile.getParentFile(); // xxx/xxx/webapps
		
				// xxx/xxx/webapps/pic/2017/7
				
				File picpath = new File(webapppath, filePath + File.separator + c.get(Calendar.YEAR) + File.separator
						+ (c.get(Calendar.MONTH) + 1) + File.separator);
				// 访问路径名
				String weburl = "../"+filePath+"/" + c.get(Calendar.YEAR) + "/" + (c.get(Calendar.MONTH) + 1) + "/";
				// 判断目录是否存在，不在则创建
				if (picpath.exists() == false) {
					picpath.mkdirs();
				}
				
				// 只取列表中的第一个文件 , 写全路径，防止系统以为是 java.io.File类
				com.jspsmart.upload.File file = files.getFile(i);
				
				String filePrefixName = genNewFilePrefixName();
				// 取出原文件的后缀名
				String extName = file.getFileExt();
				// 拼接新的文件名
				String fileName = filePrefixName + "." + extName;
		
				//  xxx/xxx/webapps/pic/2017/7/xxx.jpgyyyjpg
				weburl += fileName;
				// 物理路径: xxx/xxx/webapps/pic/2017/7/20170720222222.png
				String destFilePathName = picpath + "/" + fileName;
				// 存
				file.saveAs(destFilePathName, SmartUpload.SAVE_PHYSICAL);
		
				String fieldName=file.getFieldName();   // pic1
				String oldFileName=file.getFileName();
				
				map.put(fieldName+"_weburl", weburl);
				map.put(fieldName+"_destFilePathName", destFilePathName);
				map.put(fieldName+"_fileName", oldFileName);
			}
		
		}
		return map;
	}

	private String genNewFilePrefixName() {
		// 生成新的文件名
		Date d = new Date();
		SimpleDateFormat sdf = new SimpleDateFormat("SSyyyymmddHHmmss");
		String filePrefixName = sdf.format(d); // 文件的前缀名
		return filePrefixName;
	}

	public long getSingleSize() {
		return singleSize;
	}

	public void setSingleSize(long singleSize) {
		this.singleSize = singleSize;
	}

	public String getAllowedFilesList() {
		return allowedFilesList;
	}

	public void setAllowedFilesList(String allowedFilesList) {
		this.allowedFilesList = allowedFilesList;
	}

	public String getDeniedFilesList() {
		return deniedFilesList;
	}

	public void setDeniedFilesList(String deniedFilesList) {
		this.deniedFilesList = deniedFilesList;
	}

	public long getTotalFileSize() {
		return totalFileSize;
	}

	public void setTotalFileSize(long totalFileSize) {
		this.totalFileSize = totalFileSize;
	}
	
	
	
}

图片上传我这里有用到一个jar包

		<dependency>
			<groupId>com.jspsmart.upload</groupId>
			<artifactId>smartupload</artifactId>
			<version>1.2.6</version>
		</dependency>

最后再说一下一个比较坑的问题，当时我是使用ssh框架来开发这个项目的，其中那个Struts2的过滤器配置的url-patter的值为 /*

也就是说不管什么都给我拦截了，然后导致那个pageContext为null，导致那个上传请求一直卡在那里，直到后面把那个值改成*.action才成功上传