ckeditor 文件上传

1.从官网下载ckeditor最新版本,ckeditor-full-4.6.1.zip


2.解压压缩文件，把解压出来的文件放到项目的WebRoot文件夹下


3.在需要使用在线编辑的页面导入ckeditor.js(由于我们使用ssm框架，一定要记得放行，不然会被拦截)
<script type="text/javascript" src="ckeditor/ckeditor.js"></script>
    <textarea  cols="80" id="editor1" name="editor1" rows="10">
    </textarea>
    <script type="text/javascript">CKEDITOR.replace( "editor1")</script>(此处textarea的name属性起作用)


   注意：部分浏览器可能不支持，换个浏览器试试
4.ckeditor可以支持用户自定义：工具栏，语言，皮肤，快捷键(这里不做详细介绍，百度)
  自定义皮肤：ckeditor文件夹下有一个skins文件夹，这个文件夹里面就是放着皮肤，默认一种，需要自己下载
  ckeditor文件夹下有个config.js,配置如下：
  config.skin = 'office2013';
5.图片上传
  5.1
  cdeditor的文件上传功能默认被隐藏掉了，需要我们自己打开
  我们找到ckeditor->plugins->image->dialogs->image.js
  打开搜索upload 有个hidden属性默认值为!0,我们把!去掉，或者改为false，就可以看到上传功能出来了
  5.2
  写后台方法（controller）
  @RequestMapping("/uploadImg")
public void uplodaImg(@RequestParam("upload")MultipartFile file,
HttpServletRequest request, 
HttpServletResponse response,
@RequestParam("CKEditorFuncNum")String CKEditorFuncNum)
throws IllegalStateException, IOException{

// 设置headers参数
String fullContentType = "text/html;charset=UTF-8";
response.setContentType(fullContentType);
PrintWriter out =response.getWriter();
String fileName=file.getOriginalFilename();
String uploadContentType =file.getContentType();
String savePath = request.getSession().getServletContext().getRealPath("/upload");
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 {  
        System.out.println("上传文件格式不正确");
            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 ;  
}
java.util.Date d = new java.util.Date();
DateFormat df = new SimpleDateFormat(DEFAULT_SUB_FOLDER_FORMAT_AUTO);
SimpleDateFormat sdf = new SimpleDateFormat("yyyyMMdd");
String dirName = sdf.format(d);
String path = savePath +File.separator+ dirName;
File f = new File(path);
if(!f.exists()){
f.mkdir();
}
fileName = df.format(new Date())+expandedName;

file.transferTo(new File(path +File.separator+fileName));
        // 返回"图像"选项卡并显示图片  request.getContextPath()为web项目名   
        out.println("<script type=\"text/javascript\">"); 
        out.println("window.parent.CKEDITOR.tools.callFunction(" + CKEditorFuncNum  
                + ",'"+request.getContextPath() +"/upload/"+ f.getName() + "/" + fileName + "','')");  
        out.println("</script>"); 
        out.flush();
        out.close();
        return ;  
}
   注意：1.String fullContentType = "text/html;charset=UTF-8";
response.setContentType(fullContentType);
        这个代码很重要，设置header参数,如果不设置,上传图片后无法返回图片的路径
         2.out.println("<script type=\"text/javascript\">"); 
        out.println("window.parent.CKEDITOR.tools.callFunction(" + CKEditorFuncNum  
                + ",'"+request.getContextPath() +"/upload/"+ f.getName() + "/" + fileName + "','')");  
        out.println("</script>"); 
        out.flush();
        out.close();
        request.getContextPath()这行代码要加，有些浏览器不加,无法预览图片


    5.3 配置config.js
    config.filebrowserImageUploadUrl='/news/file/uploadImg'(这里填写后台方法地址，有些浏览器需要加项目名);
    config.image_previewText=' ';（把预览图片窗口中的鸟语干掉）