ckeditor上传图片

浏览数：29 / 时间：2015年06月09日
ckeditor版本4.4.7

CKEditor的编辑器工具栏中有一项“图片域”，该工具可以贴上图片地址来在文本编辑器中加入图片，但是没有图片上传功能。
技术分享
去掉预览中的英文 ，在ckeditor/config.js中加上一个配置项：

config.image_previewText = ‘ ‘; 注意引号里面一定要有个空格，不能是空字符串。


图片上传实现

第一步：

要开启图片上传功能。

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

id:‘Upload‘,hidden:!0    把感叹号去掉

技术分享

这个时候编辑器上已经有上传功能了

技术分享


第二步：（这里用struct2实现上传）

下面是action的代码

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

第三步：写xml配置文件，我这里是spring+struct2
applicationContext.xml文件加上
  1. <!-- ckeditor 图片上传action -->
  2. 	<bean id="ckeditorUpload" class="com.sdhf.eam.web.action.CkeditorUploadAction" parent="_baseAction"
  3. 		scope="prototype">
  4. 	</bean>

struts.xml文件加上
  1. <!-- CKEditor 上传图片 -->
  2. <action name="ckeditorUpload" class="ckeditorUpload" method="execute">  
  3. </action>

第四步：
在ckeditor/config.js加上配置项
config.filebrowserUploadUrl = ctx+"/ckeditorUpload.action";





郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。

标签： class style log com 代码 src http java html class style log com 代码 src http java html

相关文章

随机文章

您可能还喜欢

您可能还喜欢