1.下载ckeditor,我用的是4.6.2_full版本。
2.根据各自项目配置
3.配置好打开ckeditor是这样的
打开图片上传是这样的
这段看不懂的鸟文可以在ckeditor_4.6.2_full\ckeditor\plugins\image\dialogs\image.js中删除
在image.js中搜索d.config.image_previewText 找到后面的一文字删除就行
4.接下来配置config.js,可以看到上面的图没有上传项,这个配置后就有了。
打开config.js可以看到基本上什么都没有,在里面写上这样一段话你就可以看到上传项,出来了。
config.filebrowserImageUploadUrl = "/admin/upload/index";
"/admin/upload/index"; 这是我的 controller路径,具体的你的需要你自己配置
接下来我们就可以看到上传了
这时候点击上传是没有用的
后台需要接收图片并返回给ckeditor
代码如下
package com.base.util;
import java.io.File;
import java.io.IOException;
import java.io.PrintWriter;
import java.text.DateFormat;
import java.text.SimpleDateFormat;
import java.util.Date;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import org.apache.log4j.Logger;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.multipart.MultipartFile;
/**
* 上传图片
* <p>
* 为CKEDITOR定制的图片上传功能
* </p>
*
*/
@Controller
@RequestMapping("/upload")
public class ImageUploadUtil {
protected final Logger logger = Logger.getLogger(ImageUploadUtil.class);
private static final String DEFAULT_SUB_FOLDER_FORMAT_AUTO = "yyyyMMddHHmmss";
/*
* 上传图片文件夹
*/
private static final String UPLOAD_PATH = "D:\\file_upload\\image\\";
/*
* tomcat配置的文件路径
*
*/
public static final String LOCAL_FILE_PATH = "/static_img/";
/*
* 上传图片
*/
@RequestMapping(value = "/index")
public void uplodaImg(@RequestParam("upload") MultipartFile file, HttpServletRequest request, HttpServletResponse response){
try {
PrintWriter out = response.getWriter();
String CKEditorFuncNum = request.getParameter("CKEditorFuncNum");
String fileName = file.getOriginalFilename();
String uploadContentType = file.getContentType();
String expandedName = "";
if (uploadContentType.equals("image/pjpeg") || uploadContentType.equals("image/jpeg")) {
// IE6上传jpg图片的headimageContentType是image/pjpeg,而IE9以及火狐上传的jpg图片是image/jpeg
expandedName = ".jpg";
} else if (uploadContentType.equals("image/png") || uploadContentType.equals("image/x-png")) {
// IE6上传的png图片的headimageContentType是"image/x-png"
expandedName = ".png";
} else if (uploadContentType.equals("image/gif")) {
expandedName = ".gif";
} else if (uploadContentType.equals("image/bmp")) {
expandedName = ".bmp";
} else {
out.println("<script type=\"text/javascript\">");
out.println("window.parent.CKEDITOR.tools.callFunction(" + CKEditorFuncNum + ",'',"
+ "'文件格式不正确(必须为.jpg/.gif/.bmp/.png文件)');");
out.println("</script>");
return;
}
if (file.getSize() > 1024 * 1024 * 2) {
out.println("<script type=\"text/javascript\">");
out.println("window.parent.CKEDITOR.tools.callFunction(" + CKEditorFuncNum + ",''," + "'文件大小不得大于2M');");
out.println("</script>");
return;
}
/*
* 用当前时间为图片重命名
* */
DateFormat df = new SimpleDateFormat(DEFAULT_SUB_FOLDER_FORMAT_AUTO);
fileName = df.format(new Date()) + expandedName;
file.transferTo(new File(UPLOAD_PATH + "/" + fileName));
// 返回"图像"选项卡并显示图片
out.println("<script type=\"text/javascript\">");
out.println("window.parent.CKEDITOR.tools.callFunction(" + CKEditorFuncNum + ",'" + LOCAL_FILE_PATH
+ fileName + "','')");
out.println("</script>");
return;
} catch (IllegalStateException e) {
e.printStackTrace();
} catch (IOException e) {
e.printStackTrace();
} catch (Exception e) {
e.printStackTrace();
}
}
}
然后就完了,启动项目试试吧,这是我看了大半天其他帖子整理出来的,在我的项目中多次试验后成功的