CKEditor4.3实现图片上传

本人用的 CKEditor版本为4.3  CKEditor 配置
CKEditor编辑器的工具栏中图像初始的时候应该是这样子的,没有图片上传按钮
并且预览中有一堆火星文,可以修改相应配置删除它。
方法:
打开config.js文件,加入下面一句话
config.image_previewText=' '; //预览区域显示内容
  

下面研究图片上传 
要先出现上传按钮,有两种方法我就写其中一种简单
易懂
明了的Method
打开config.js文件,加入下面一句话
 config.filebrowserImageUploadUrl= "
/module/news/imageUpload.action
"; //待会要上传的action或servlet
 
OK现在基本上是下面这个样子的了



上面的只是一个上传页面。也就相当于一个HTML的form表单,
要配置点击"上传到服务器上"按钮后请求的Action。已在ckeditor/config.js中配置。
就是上面的 config.filebrowserImageUploadUrl = "/module/news/imageUpload.action";

接下来就是action中的上传方法:
  1. public class ImageUpload extends WebSupport {  
  2.     private File upload;       //文件  
  3.     private String uploadContentType;   //文件类型  
  4.     private String uploadFileName;       //文件名  
  5.     /** 
  6.      * 图片上传 
  7.      * @return 
  8.      * @throws IOException  
  9.      */  
  10.     public String fileUpload() throws IOException{  
  11.         //HttpServletResponse response = ServletActionContext.getResponse();  
  12.         getResponse().setCharacterEncoding("utf-8");  
  13.         PrintWriter out =  getResponse().getWriter();    
  14.         // CKEditor提交的很重要的一个参数    
  15.         String callback = getRequest().getParameter("CKEditorFuncNum");  
  16.         String expandedName = "";  //文件扩展名    
  17.         if (uploadContentType.equals("image/pjpeg") || uploadContentType.equals("image/jpeg")) {    
  18.             //IE6上传jpg图片的headimageContentType是image/pjpeg,而IE9以及火狐上传的jpg图片是image/jpeg    
  19.             expandedName = ".jpg";    
  20.         }else if(uploadContentType.equals("image/png") || uploadContentType.equals("image/x-png")){    
  21.             //IE6上传的png图片的headimageContentType是"image/x-png"    
  22.             expandedName = ".png";    
  23.         }else if(uploadContentType.equals("image/gif")){    
  24.             expandedName = ".gif";    
  25.         }else if(uploadContentType.equals("image/bmp")){    
  26.             expandedName = ".bmp";    
  27.         }else{    
  28.             out.println("<script type=\"text/javascript\">");      
  29.             out.println("window.parent.CKEDITOR.tools.callFunction(" + callback + ",''," + "'文件格式不正确(必须为.jpg/.gif/.bmp/.png文件)');");     
  30.             out.println("</script>");    
  31.             return null;    
  32.         }    
  33.         if(upload.length() > 600*1024){    
  34.             out.println("<script type=\"text/javascript\">");      
  35.             out.println("window.parent.CKEDITOR.tools.callFunction(" + callback + ",''," + "'文件大小不得大于600k');");     
  36.             out.println("</script>");    
  37.             return null;    
  38.         }    
  39.             
  40.         InputStream is = new FileInputStream(upload);    
  41.         String uploadPath = ServletActionContext.getServletContext().getRealPath("/img/uploadImg");    
  42.         String fileName = java.util.UUID.randomUUID().toString();  //采用时间+UUID的方式随即命名    
  43.         fileName += expandedName;    
  44.         File file = new File(uploadPath);  
  45.         if(!file.exists()){  //如果路径不存在,创建  
  46.             file.mkdirs();  
  47.         }  
  48.         File toFile = new File(uploadPath, fileName);    
  49.         OutputStream os = new FileOutputStream(toFile);       
  50.         byte[] buffer = new byte[1024];       
  51.         int length = 0;    
  52.         while ((length = is.read(buffer)) > 0) {       
  53.             os.write(buffer, 0, length);       
  54.         }       
  55.         is.close();    
  56.         os.close();    
  57.             
  58.         // 返回"图像"选项卡并显示图片    
  59.         out.println("<script type=\"text/javascript\">");      
  60.         out.println("window.parent.CKEDITOR.tools.callFunction(" + callback + ",'" + "/img/uploadImg/" + fileName + "','')");      
  61.         out.println("</script>");    
  62.         return null;  
  63.     }  
  64.     public File getUpload() {  
  65.         return upload;  
  66.     }  
  67.     public void setUpload(File upload) {  
  68.         this.upload = upload;  
  69.     }  
  70.     public String getUploadContentType() {  
  71.         return uploadContentType;  
  72.     }  
  73.     public void setUploadContentType(String uploadContentType) {  
  74.         this.uploadContentType = uploadContentType;  
  75.     }  
  76.     public String getUploadFileName() {  
  77.         return uploadFileName;  
  78.     }  
  79.     public void setUploadFileName(String uploadFileName) {  
  80.         this.uploadFileName = uploadFileName;  
  81.     }  
  82. }  

config.js
[html]  view plain copy 在CODE上查看代码片 派生到我的代码片
  1. CKEDITOR.editorConfig = function( config ) {  
  2.     config.filebrowserImageUploadUrl = "/module/news/imageUpload.action"; //固定路径  
  3.     config.image_previewText=' '; //预览区域显示内容
*.xml
 <action name="imageUpload" class="你的Action URL" method="fileUpload">
            <result name="success"></result>
        </action>

最后上传图片成功


jsp页面配置控件 
往页面导入ckeditor/ckeditor.js
<script type="text/javascript">
            CKEDITOR.replace('TextArea1');
        </script>
        <textarea id="TextArea1" name="
newsBody " cols="20" rows="5" class="ckeditor"></textarea> 


PS:不同版本实现的方法与效果可能不太一样,只作参考。


评论 13
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值