ckeditor+struts2实现图片上传功能

1、下载并解压ckeditor到项目的目录下

2、清除预览中的文字显示

第一种方法： 打开ckeditor/plugins/image/dialogs/image.js文件，搜索“b.config.image_previewText”，(b.config.image_previewText||'')单引号中的内容全删了，注意别删多了。

第二种方法：打开config.js文件，加入下面一句话

config.image_previewText=' '; //预览区域显示内容

3、打开上传图片中的上传按钮

打开ckeditor/plugins/image/dialogs/image.js文件，搜索并找到这一段 id:'Upload',hidden:true或者叫做id:'Upload',hidden:!0更改为

id:'Upload',hidden:false或者id:'Upload',hidden:0则会看到上传按钮显示出来。

4、JSP页面内容

 
                内容：
               

 

5、struts2中的配置显示

   

         
       
   

6、配置按钮“上传服务器”到action的路径

在ckeditor/config.js下配置关联action的路径，增加代码config.filebrowserImageUploadUrl=projectName+"/manage/ckeditorUpload.action";

projectName为项目的相对路径，通过在ckeditor/config.js下增加代码获得：

var curWwwPath=window.document.location.href;
//获取主机地址之后的目录如：/Tmall/index.jsp
var pathName=window.document.location.pathname;
var pos=curWwwPath.indexOf(pathName);
//获取主机地址，如：//localhost:8080
var localhostPaht=curWwwPath.substring(0,pos);
//获取带"/"的项目名，如：/Tmall
var projectName=pathName.substring(0,pathName.substr(1).indexOf('/')+1);

7、设置action

可以通过F12查看插件的路径，它的name是upload：

public class CkeditorUpFileAction extends BaseAction{
/**
* 
*/
private static final long serialVersionUID = 4222170565445752625L;
private File upload;//ckeditor在线编辑器中默认的文件名
private String uploadContentType;//struts中默认的属性名  文件名+ContentType
private String uploadFileName;//struts中默认的属性名  文件名+FileName


public File getUpload() {
return upload;
}


public void setUpload(File upload) {


this.upload = upload;
}


public String getUploadContentType() {
return uploadContentType;
}


public void setUploadContentType(String uploadContentType) {
this.uploadContentType = uploadContentType;
}


public String getUploadFileName() {
return uploadFileName;
}


public void setUploadFileName(String uploadFileName) {
this.uploadFileName = uploadFileName;
}


/**
* 上传方法
*/
public String ckeditorUpload() throws Exception {
HttpServletResponse response = ServletActionContext.getResponse();
response.setCharacterEncoding("utf-8");
PrintWriter out = response.getWriter();


// CKEditor提交的很重要的一个参数
String callback = ServletActionContext.getRequest().getParameter(
"CKEditorFuncNum");


String expandedName = ""; // 文件扩展名
if (uploadContentType.equals("image/pjpeg")
|| uploadContentType.equals("image/jpeg")) {
// IE6上传jpg图片的headimageContentType是image/pjpeg，而IE9以及火狐上传的jpg图片是image/jpeg
expandedName = ".jpg";
} else if (uploadContentType.equals("image/png")
|| uploadContentType.equals("image/x-png")) {
// IE6上传的png图片的headimageContentType是"image/x-png"
expandedName = ".png";
} else if (uploadContentType.equals("image/gif")) {
expandedName = ".gif";
} else if (uploadContentType.equals("image/bmp")) {
expandedName = ".bmp";
} else {
out.println("");
return null;
}


if (upload.length() > 600 * 1024) {
out.println("");
return null;
}


InputStream is = new FileInputStream(upload);
String uploadPath = ServletActionContext.getServletContext()
.getRealPath("/ckeditorImg");
String fileName = java.util.UUID.randomUUID().toString(); // 采用时间+UUID的方式随即命名
fileName += expandedName;
File toFile = new File(uploadPath, fileName);
OutputStream os = new FileOutputStream(toFile);
byte[] buffer = new byte[1024];
int length = 0;
while ((length = is.read(buffer)) > 0) {
os.write(buffer, 0, length);
}
is.close();
os.close();


// 返回“图像”选项卡并显示图片
out.println("");


return null;
}


}