CKEditor图片上传实现详细步骤(使用Struts 2)

最新推荐文章于 2024-05-06 11:42:41 发布

aisinilehehe

最新推荐文章于 2024-05-06 11:42:41 发布

阅读量1.7k

点赞数

本人使用的 CKEditor 版本是 4.7.0

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

“预览”中有一大堆鸟语，看得很不爽。可以打开ckeditor/plugins/image/dialogs/image.js文件，搜索"b.config.image_previewText"就能找到这段鸟语了，(b.config.image_previewText||'')单引号中的内容全删了。

下面研究图片上传。

step 1：

首先，还是image.js这个文件，搜索“upload”可以找到这一段

id:'Upload',hidden:

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

step 2：

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

加入：

config.filebrowserUploadUrl="actions/ckeditorUpload";

"ckeditorUpload"是请求的URL，也就是点击这个按钮就会post到ckeditorUpload地址进行处理，这里指向的是Struts 2的一个Action

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

step 3：

文件上传的控件相当于<input type="file" name="upload" .../>，其name是”upload”，知道了name那么就可以在Action中获取这个文件。

 
   private File upload;  //文件  
 private String uploadContentType;  //文件类型  
 private String uploadFileName;   //文件名

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

step 4：

如果上传的图片格式不正确，可以在上传界面进行提示。

这个提示不是ckeditor提示的，要在Action中响应。

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

step 5：

这段代码是Struts 2上传图片的核心代码，把图片上传后保存在项目的某个目录下，并随机重命名。

step 6：

图片上传成功，在目录下也可以看到图片，至此图片上传成功。但是如何将图片发到编辑器中呢？

点“确定”按钮会有以下提示。

到这里，要在Action中返回一段JS脚本。

有了这段代码，图片上传成功后，根据这里的

"img/postImg/" + filename

相对地址，就可以使用这个图片，直接转到“图像”页面。

附：Struts 2 Action代码

 
   package com.nos.java.action.teacher;
 
 
 import java.io.File;
 import java.io.FileInputStream;
 import java.io.FileNotFoundException;
 import java.io.FileOutputStream;
 import java.io.IOException;
 import java.io.InputStream;
 import java.io.OutputStream;
 import java.io.PrintWriter;
 import java.text.SimpleDateFormat;
 import java.util.ArrayList;
 import java.util.Calendar;
 import java.util.Date;
 import java.util.List;
 
 
 import javax.servlet.ServletOutputStream;
 import javax.servlet.http.HttpServletRequest;
 import javax.servlet.http.HttpServletResponse;
 import javax.servlet.http.HttpSession;
 
 
 import net.sf.json.JSONArray;
 import net.sf.json.JSONObject;
 
 
 import org.apache.commons.httpclient.HttpClient;
 import org.apache.commons.httpclient.HttpStatus;
 import org.apache.commons.httpclient.methods.PostMethod;
 import org.apache.commons.httpclient.params.HttpMethodParams;
 import org.apache.commons.lang.StringUtils;
 import org.apache.struts2.ServletActionContext;
 import org.apache.struts2.convention.annotation.Result;
 import org.apache.struts2.convention.annotation.Results;
 import org.springframework.beans.factory.annotation.Autowired;
 import org.springside.modules.orm.hibernate.Page;
 
 
 import com.nos.base.action.BaseAction;
 import com.nos.base.pojo.MyVisit;
 import com.nos.base.pojo.UserVo;
 import com.nos.commons.util.ConstComm;
 import com.nos.commons.util.InterFaceConstComm;
 import com.nos.commons.util.LoggerUtils;
 import com.nos.commons.util.PubTool;
 import com.nos.commons.util.ResolveXml;
 import com.nos.java.action.downl.IcpInformatAction;
 import com.nos.java.pojo.Pro;
 import com.nos.java.pojo.ProModule;
 import com.nos.java.pojo.Task;
 import com.nos.java.service.icp.IProModuleService;
 import com.nos.java.service.icp.IProService;
 import com.nos.java.service.icp.ISystemConfigService;
 import com.nos.java.service.icp.ITaskService;
 import com.nos.java.utils.WriteUtils;
 import com.nos.java.vo.CompanyVo;
 import com.nos.java.vo.ZtreeVo;
 
 @SuppressWarnings("serial")
 @Results({
 @Result(name = "list", location = "task_list.jsp"),
 @Result(name = "edit", location = "task_edit.jsp")
 })
 public class TaskManagerAction extends BaseAction{
 private File upload;  //文件  
 private String uploadContentType;  //文件类型  
 private String uploadFileName;   //文件名 
 
 // private String imgeArray [] = {".bmp", ".gif", ".jpe", ".jpeg", ".jpg", ".png"}; 
 private static List<String> imgList = new ArrayList<>();
 static{
 imgList.add(".bmp");
 imgList.add(".gif");
 imgList.add(".jpe");
 imgList.add(".jpeg");
 imgList.add(".jpg");
 imgList.add(".png");
 }
 public void uploadImg() throws IOException{
 
 String postfix = uploadFileName.substring(uploadFileName.lastIndexOf("."));
 
 boolean flag = imgList.contains(postfix);
 
 System.out.println(flag);
 
 HttpServletResponse response = ServletActionContext.getResponse();
 HttpServletRequest request = ServletActionContext.getRequest();
 response.setContentType("text/html;charset=utf-8");
 // ServletOutputStream out = response.getOutputStream();
 PrintWriter out = response.getWriter();
 String callback =ServletActionContext.getRequest().getParameter("CKEditorFuncNum"); 
 
 if(!flag){
 out.println("<script type=\"text/javascript\">"); 
             out.println("window.parent.CKEDITOR.tools.callFunction(" + callback  
                     + ",' '," + "'文件格式不正确（必须为.jpg/.gif/.bmp/.png/.jpe/.png文件）');");  
 //            out.println("window.parent.CKEDITOR.tools.callFunction(" + callback  
 //                    + ",' '," + "'\u6587\u4ef6\u683c\u5f0f\u4e0d\u6b63\u786e\uff08\u5fc5\u987b\u4e3a\u002e\u006a\u0070\u0067\u002f\u002e\u0067\u0069\u0066\u002f\u002e\u0062\u006d\u0070\u002f\u002e\u0070\u006e\u0067\u6587\u4ef6\uff09');");  
             out.println("</script>");
 return;
 }
 
 
 //按时间保存图片
 Calendar calendar = Calendar.getInstance();
 
 int year = calendar.get(Calendar.YEAR);
 
 int month = calendar.get(Calendar.MONTH) + 1;
 
 int day = calendar.get(Calendar.DAY_OF_MONTH);
 
 //获取保存时间
 SimpleDateFormat sdf = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss");
         String uploadDate = sdf.format(new Date());
 
 String uploadPath = ServletActionContext.getServletContext().getRealPath("/uploadImages") + "\\" + year;
 //      + "\\" + month + "\\" + day;    //取得真实路径  
 
 if(month < 10){
 uploadPath = uploadPath + "\\0" + month;
 }else {
 uploadPath = uploadPath + "\\" + month;
 }
 
 if(day < 10){
 uploadPath = uploadPath + "\\0" + day;
 }else {
 uploadPath = uploadPath + "\\" + day;
 }
 
 File relPath = new File(uploadPath);
 
 if(!relPath.exists()){
 relPath.mkdirs();
 }
 
 File saveFilePath = new File(relPath,new Date().getTime() + postfix);
 
 String imagePath = saveFilePath.getPath();
 
 int index = imagePath.indexOf("uploadImages");
 
 imagePath = imagePath.substring(index);
 
 InputStream is = new FileInputStream(upload);
 OutputStream os = new FileOutputStream(saveFilePath);
 
 byte[] buffer = new byte[1024];     
 int length = 0;  
 while ((length = is.read(buffer)) > 0) {     
    os.write(buffer, 0, length);     
 }     
 is.close();  
 os.close(); 
 
 // String projectName = request.getContextPath();
 imagePath = request.getScheme()+"://"+request.getLocalAddr()+":"+request.getServerPort()+request.getContextPath()+"/"+imagePath;
 // imagePath = (imagePath).replaceAll("\\\\", "\\\\\\\\");
 imagePath = (imagePath).replaceAll("\\\\", "/");
 out.println("<script type=\"text/javascript\">");  
 out.println("window.parent.CKEDITOR.tools.callFunction("+ callback + ",'" +imagePath + "','')");   
 out.println("</script>");
 }
 }
 
 
 

aisinilehehe

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
CKEditor图片上传实现详细步骤(使用Struts 2)

本人使用的CKEditor版本是4.7.0CKEditor的编辑器工具栏中有一项“图片域”，该工具可以贴上图片地址来在文本编辑器中加入图片，但是没有图片上传。“预览”中有一大堆鸟语，看得很不爽。可以打开ckeditor/plugins/image/dialogs/image.js文件，搜索"b.config.image_previewText"就能找到这段鸟语了，(b.
复制链接

扫一扫