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

- 日理万妓 2022-06-14 04:59 204阅读 0赞

本人使用的 CKEditor 版本是 4.7.0

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

![Image 1][]

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

下面研究图片上传。

step 1：

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

id:'Upload',hidden:

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

![Image 1][]

step 2：

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

加入：

config.filebrowserUploadUrl="actions/ckeditorUpload";

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

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中获取这个文件。

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

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

step 4：

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

![20130427165753880][]

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

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 + ",''," + "'文件格式不正确（必须为.jpg/.gif/.bmp/.png文件）');");   
5.      out.println("</script>");  
6.      **return** **null**;  
7.  \}

step 5：

![Image 1][]

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

step 6：

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

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

![1340343173_4025.png][]

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

![Image 1][]

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

"img/postImg/" + filename

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

![1340343223_8249.png][]

附：Struts 2 Action代码

1.  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;  
    
2.  @SuppressWarnings("serial")  
    @Results(\{  
    @Result(name = "list", location = "task\_list.jsp"),  
    @Result(name = "edit", location = "task\_edit.jsp")  
    \})  
    public class TaskManagerAction extends BaseAction\{
3.  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");  
    \}
4.  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>");  
    \}
5.  \}

[Image 1]: 
[20130427165753880]: /images/20220614/eabf94da1b4d480282e6947441a19555.png
[1340343173_4025.png]: https://img-my.csdn.net/uploads/201206/22/1340343173_4025.png
[1340343223_8249.png]: https://img-my.csdn.net/uploads/201206/22/1340343223_8249.png