最近在做个人博客,对于这个项目而言,文本编辑器的选择相对的比较重要,在百度UEditor、MarkDown等之中最终还是选择了 CKEDITOR,对于CKeditor的介绍自不必多说,
网上对于如何配置的文章虽然很多,但大多是千篇一律或是不完整,错误百出,对于ckeditor编辑器的前台配置可以按照官网上一步一步来,这里主要想总结一下上传图片该如何操作。
一、我用的是4.47版本
CKEditor编辑器的工具栏中初始的时候应该是这样子的,没有图片上传按钮
第一步:打开ckeditor/plugins/image/dialogs/image.js文件,搜索hidden,将所有出现id:"Upload",hidden:!0的!去掉或者改为false
这一步完成之后将会看到上传按钮
第二步:完成上传图片的Controller:
/*
* 图片命名格式
*/
private static final String DEFAULT_SUB_FOLDER_FORMAT_AUTO = "yyyyMMddHHmmss";
@Resource(name="adminServiceImpl")
private AdminService adminService;
protected Logger logger = Logger.getLogger(AdminController.class);
/*
* 项目绝对路径
*/
private static final String PROJECT_PATH="C:/Users/Administrator/workspace/PersonalBlog/";
/*
* 上传图片文件夹
*/
private static final String UPLOAD_PATH="WebContent/upload/img/";
/*
* 上传图片
*/
@RequestMapping("uploadImg")
public void uplodaImg(@RequestParam("upload")MultipartFile file,//
HttpServletRequest request, //
HttpServletResponse response,//
@RequestParam("CKEditorFuncNum")String CKEditorFuncNum)//
throws IllegalStateException, IOException{
PrintWriter out =response.getWriter();
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()> 600 * 1024) {
out.println("<script type=\"text/javascript\">");
out.println("window.parent.CKEDITOR.tools.callFunction(" + CKEditorFuncNum
+ ",''," + "'文件大小不得大于600k');");
out.println("</script>");
return ;
}
DateFormat df = new SimpleDateFormat(DEFAULT_SUB_FOLDER_FORMAT_AUTO);
fileName = df.format(new Date())+expandedName;
file.transferTo(new File(PROJECT_PATH+UPLOAD_PATH +fileName));
// 返回"图像"选项卡并显示图片 request.getContextPath()为web项目名
out.println("<script type=\"text/javascript\">");
out.println("window.parent.CKEDITOR.tools.callFunction(" + CKEditorFuncNum
+ ",'" + "upload/img/" + fileName + "','')");
out.println("</script>");
return ;
}
第三步:配置点击” 上传到服务器“ 按钮之后请求的控制器,在ckeditor/config.js中加入这一段代码
config.image_previewText=' '; //预览区域显示内容
config.filebrowserImageUploadUrl= "uploadImg.html"; //要上传的action或servlet
注意:如果上传图片之后看不到图片,如图
方法一:请刷新图片的上传文件夹,因为图片是上传到绝对路径,Eclipse需要同步才能知道这一行为,
项目上线后一般不会出现这一行为
方法二:Automatically Refresh打勾,让Eclipse自动同步文件系统