【CKEditor 】CKEditor 图片的上传

CKEditor的编辑器工具栏中有一项“图片域”，该工具可以贴上图片地址来在文本编辑器中加入图片，但是没有图片上传功能。

“预览”中有一坨鸟语，看得很不爽，首先要去掉这些。在ckeditor/config.js中加上一个配置项：

config.image_previewText = ' ';

注意引号里面一定要有个空格，不能是空字符串。

扫除这个障碍，下面来研究图片上传。

step 1：

首先，要开启图片上传功能。

找到ckeditor/plugins/image/dialogs/image.js这个文件，CTRL+F搜索下面一段JS：

id:'Upload',hidden:true

实际上上传功能被隐藏了，把上面的true改成false，再打开编辑器，就能找到上传功能了。

step 2：

上面的只是一个上传页面，也就是一个form表单，要配置点击“上传到服务器上”按钮后请求的Action，可以在ckeditor/config.js中加入一个配置项：

config.filebrowserUploadUrl = "actions/ckeditorUpload";

“actions/ckeditorUpload”是文件上传POST请求的URL，也就是点击这个按钮就会post到actions/ckeditorUpload进行处理，这里指向的是Struts 2的一个Action。当然，也可以用Servlet或者ASP、PHP等来处理请求。

在Struts 2配置文件中，就需要加入对应的配置，来处理actions/ckeditorUpload URL的请求：

[html]  view plain copy

1. <package name="actions" extends="struts-default" namespace="/actions">  
2.   <action name="ckeditorUpload" class="com.xxx.CkeditorUpload ">  
3.   </action>  
4. </package>  

step 3：

文件上传的控件相当于<input  type="file" name="upload" .../>，其name是”upload”。

知道了name那么就可以在Action中获取这个文件。

[java]  view plain copy

1. private File upload;  //文件  
2. private String uploadContentType;  //文件类型  
3. private String uploadFileName;   //文件名  

以上三个私有变量都要有对应的 set方法 ，如果不了解的话可以先学习一下Struts 2文件上传。

step 4：

上传过程中的一些错误（例如图片格式不正确、图片太大），可以在界面上进行提示：

这个需要通过HttpServletResponse向客户端写入一段JS来实现：

[java]  view plain copy

1. String callback = ServletActionContext.getRequest().getParameter("CKEditorFuncNum");   
2. if([判断条件]){  
3.     out.println("<script type=\"text/javascript\">");  
4.     out.println("window.parent.CKEDITOR.tools.callFunction(" + callback  
5.         + ",'','文件格式不正确（必须为.jpg/.gif/.bmp/.png文件）');");  
6.     out.println("</script>");  
7.     return null;  
8. }  

step 5：

Struts 2上传文件核心代码：

[java]  view plain copy

1. InputStream is = new FileInputStream(upload);  
2. String uploadPath = ServletActionContext.getServletContext().getRealPath("/");  
3. String fileName = java.util.UUID.randomUUID().toString(); // 采用UUID的方式命名保证不会重复  
4. fileName += expandedName;  
5. File toFile = new File(uploadPath, fileName);  
6. OutputStream os = new FileOutputStream(toFile);  
7.   
8. // 文件复制到指定位置  
9. byte[] buffer = new byte[1024];  
10. int length = 0;  
11. while ((length = is.read(buffer)) > 0) {  
12.     os.write(buffer, 0, length);  
13. }  
14. is.close();  
15. os.close();  

上面的代码是将文件重命名并放到指定位置，这里是"/"表示上传到web app根目录。这里也可以指定文件上传到其他目录，但是 目录一定要已存在 ，因为FileOutputStream并不会创建目录，如果指定的文件目录不存在，那么就会出现异常。

step 6：

图片上传成功，在web app目录下也可以看到图片，但是在点击“确定”后会出现“缺少图像源文件地址”：

这是因为CKEditor并不知道图片放在哪里，所以无法显示在“预览”中。下面out.print一段JS来告诉CKEditor图片的相对路径：

[java]  view plain copy

1. // 返回“图像”选项卡并显示图片  
2. out.println("<script type=\"text/javascript\">");  
3. out.println("window.parent.CKEDITOR.tools.callFunction(" + callback  
4.         + ",'" + fileName + "','')"); // 相对路径用于显示图片  
5. out.println("</script>");  
6. return null;  

有了这段JS代码，图片上传成功后，根据JS中第二个参数fileName，就可以将这个路径的图片加载到“预览”中了。

原文地址：http://blog.csdn.net/xiao__gui/article/details/7684505

最后附上相关代码：

config.js配置：

[html]  view plain copy print ?

1. CKEDITOR.editorConfig = function( config )    
2. {    
3.     config.image_previewText = ' '; // 去掉图片预览中的鸟语，这里注意里面一定要有个空格    
4.     config.filebrowserUploadUrl = "ImageAction"; // 指定上传的目标地址    
5. };    

Struts 2 Action代码：

[html]  view plain copy print ?

1. package action;  
2. import java.io.File;    
3. import java.io.FileInputStream;    
4. import java.io.FileOutputStream;    
5. import java.io.InputStream;    
6. import java.io.OutputStream;    
7. import java.io.PrintWriter;    
8.     
9. import javax.servlet.http.HttpServletResponse;    
10.     
11. import org.apache.struts2.ServletActionContext;    
12.     
13. import com.opensymphony.xwork2.ActionSupport;    
14.     
15. public class ImageAction extends ActionSupport {    
16.     
17.     private File upload;    
18.     private String uploadContentType;    
19.     private String uploadFileName;    
20.     
21.     public File getUpload() {    
22.         return upload;    
23.     }    
24.     
25.     public void setUpload(File upload) {    
26.         this.upload = upload;    
27.     }    
28.     
29.     public String getUploadContentType() {    
30.         return uploadContentType;    
31.     }    
32.     
33.     public void setUploadContentType(String uploadContentType) {    
34.         this.uploadContentType = uploadContentType;    
35.     }    
36.     
37.     public String getUploadFileName() {    
38.         return uploadFileName;    
39.     }    
40.     
41.     public void setUploadFileName(String uploadFileName) {    
42.         this.uploadFileName = uploadFileName;    
43.     }    
44.     
45.     public String execute() throws Exception {    
46.             
47.         HttpServletResponse response = ServletActionContext.getResponse();    
48.         response.setCharacterEncoding("GBK");    
49.         PrintWriter out = response.getWriter();    
50.     
51.         // CKEditor提交的很重要的一个参数    
52.         String callback = ServletActionContext.getRequest().getParameter("CKEditorFuncNum");    
53.     
54.         String expandedName = ""; // 文件扩展名    
55.         if (uploadContentType.equals("image/pjpeg") || uploadContentType.equals("image/jpeg")) {    
56.             // IE6上传jpg图片的headimageContentType是image/pjpeg，而IE9以及火狐上传的jpg图片是image/jpeg    
57.             expandedName = ".jpg";    
58.         } else if (uploadContentType.equals("image/png") || uploadContentType.equals("image/x-png")) {    
59.             // IE6上传的png图片的headimageContentType是"image/x-png"    
60.             expandedName = ".png";    
61.         } else if (uploadContentType.equals("image/gif")) {    
62.             expandedName = ".gif";    
63.         } else if (uploadContentType.equals("image/bmp")) {    
64.             expandedName = ".bmp";    
65.         } else {    
66.             out.println("<script type=\"text/javascript\">");    
67.             out.println("window.parent.CKEDITOR.tools.callFunction(" + callback    
68.                     + ",'','文件格式不正确（必须为.jpg/.gif/.bmp/.png文件）');");    
69.             out.println("</script>");    
70.             return null;    
71.         }    
72.     
73.         if (upload.length() > 600 * 1024) {    
74.             out.println("<script type=\"text/javascript\">");    
75.             out.println("window.parent.CKEDITOR.tools.callFunction(" + callback    
76.                     + ",''," + "'文件大小不得大于600k');");    
77.             out.println("</script>");    
78.             return null;    
79.         }    
80.     
81.         InputStream is = new FileInputStream(upload);    
82.         String uploadPath = ServletActionContext.getServletContext().getRealPath("/");    
83.         String fileName = java.util.UUID.randomUUID().toString(); // 采用UUID的方式命名保证不会重复    
84.         fileName += expandedName;    
85.         File toFile = new File(uploadPath, fileName);    
86.         OutputStream os = new FileOutputStream(toFile);    
87.         System.out.println("os路径"+os);  
88.         System.out.println("toFile路径"+toFile);  
89.             
90.         // 文件复制到指定位置    
91.         byte[] buffer = new byte[1024];    
92.         int length = 0;    
93.         while ((length = is.read(buffer)) > 0) {    
94.             os.write(buffer, 0, length);    
95.         }    
96.         is.close();    
97.         os.close();    
98.     
99.         // 返回“图像”选项卡并显示图片    
100.         out.println("<script type=\"text/javascript\">");    
101.         out.println("window.parent.CKEDITOR.tools.callFunction(" + callback    
102.                 + ",'" + fileName + "','')"); // 相对路径用于显示图片    
103.         out.println("</script>");    
104.         return null;    
105.     }    
106. }