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

本人使用的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，再打开编辑器，就能找到上传功能了。

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

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图片上传实现详细步骤(使用Struts 2)

这个提示不是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：

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

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

step 6：

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

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

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

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

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

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

"img/postImg/" + filename

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

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

附：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>");
}

}

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

相关推荐