CKEditor图片上传

1.根据实际需要下载指定的CKEditor

2.删除文件ckeditor/plugins/image/dialogs/image.js预览框中文本内容，并修改hidden属性值为显示上传选项卡

删除image.js中包含在双引号中的上述文本

将image.js中的hidden属性值改为0

3.修改ckeditor/config.js文件，配置“上传到服务器”按钮调用的controller接口

4.“上传到服务器”按钮调用的controller级别的接口

@Controller@RequestMapping("publicutil")public class PublicUtilController {@RequestMapping(value = "uploadImage")private void uploadImage(HttpServletRequest request, HttpServletResponse response, HttpSession session,@RequestParam  MultipartFile[] upload) {response.setCharacterEncoding("UTF-8");PrintWriter out=null;try {out = response.getWriter();} catch (IOException e1) {logger.error("response.getWriter()异常="+e1);e1.printStackTrace();}String callback = request.getParameter("CKEditorFuncNum");// 获得response,request  Map<String, Object> m = new HashMap<String, Object>();if (!ServletFileUpload.isMultipartContent(request)) {m.put("error", 1);m.put("message", "请选择文件!");//return m;logger.info("请选择文件!");}String originalFileName=null;//上传的图片文件名String fileExtensionName=null;//上传图片的文件扩展名for (MultipartFile file : upload) {if (file.getSize()> 10*1024* 1024) {out.println("<script type=\"text/javascript\">");out.println("window.parent.CKEDITOR.tools.callFunction(" + callback+ ",''," + "'文件大小不得大于10M');");out.println("</script>");}originalFileName=file.getOriginalFilename();logger.info("上传的图片文件名="+originalFileName);fileExtensionName= originalFileName.substring(originalFileName.lastIndexOf(".") ,originalFileName.length()).toLowerCase();logger.info("图片文件扩展名="+fileExtensionName);String[]  imageExtensionNameArray= WebsiteConstant.IMAGE_EXTENSION_NAME_ARRAY; String allImageExtensionName="";boolean isContain=false;//默认不包含上传图片文件扩展名for(int i=0;i<imageExtensionNameArray.length;i++){if(fileExtensionName.equals(imageExtensionNameArray[i])){isContain=true;}if(i==0){allImageExtensionName+=imageExtensionNameArray[i];}else{allImageExtensionName+=" , "+imageExtensionNameArray[i];}}String newFileName=java.util.UUID.randomUUID().toString()+fileExtensionName;String uploadPath =WebsiteConstant.PIC_APP_FILE_SYSTEM_CKEDITOR_LOCATION;if(isContain){//包含File pathFile = new File(uploadPath);if (!pathFile.exists()) { // 如果路径不存在，创建pathFile.mkdirs();}try {FileUtils.copyInputStreamToFile(file.getInputStream(), new File(uploadPath ,newFileName));//InputStream is=file.getInputStream();//File toFile = new File(uploadPath, newFileName);//OutputStream os = new FileOutputStream(toFile);//byte[] buffer = new byte[1024];//int length = 0;//while ((length = is.read(buffer)) > 0) {//os.write(buffer, 0, length);//}//is.close();//os.close();} catch (IOException e) {logger.error("FileUtils.copyInputStreamToFile   uploadPath="+uploadPath+"    newFileName ="+newFileName+"    exception="+e);}String imageUrl=WebsiteConstant.PIC_APP_SERVER_URL+"images/ckeditor/"+newFileName;// 返回"图像信息"选项卡并显示图片 ,在对应的文本框中显示图片资源urlout.println("<script type=\"text/javascript\">");out.println("window.parent.CKEDITOR.tools.callFunction(" + callback+ ",'" +imageUrl + "','')");out.println("</script>");}else{out.println("<script type=\"text/javascript\">");out.println("window.parent.CKEDITOR.tools.callFunction(" + callback+ ",''," + "'文件格式不正确（必须为"+allImageExtensionName+"文件）');");out.println("</script>");}}   }}

public class WebsiteConstant {public static String[]  IMAGE_EXTENSION_NAME_ARRAY={".jpg",".jpeg",".png",".gif",".bmp"};public static String PIC_APP_SERVER_URL="http://localhost:8090/Picture/";public static String PIC_APP_FILE_SYSTEM_CKEDITOR_LOCATION="/Users/abc/Documents/tomcat/webapps/Picture/images/ckeditor/";public static final int SUCCESS = 1; // 操作成功

5.若是在Maven项目中使用的CKEditor，需要在pom.xml中添加如下代码：

<dependency>    <groupId>com.ckeditor</groupId>    <artifactId>ckeditor-java-core</artifactId>    <version>3.5.3</version></dependency>

6.最终效果图