又是一个漫漫长夜。
公司的编辑器坏了，用的是百度编辑器，上传图片的网址被框架给拦截了，我们本地怎么测试都没问题，放到服务器就这样了。和老李找了半天，疯了，没原因的。
笔者以前用过jsp+ckeditor，觉得里面上传功能挺好用，于是想出这个法子，把网站的编辑器换掉。
用的是最新的版本的，4点几的。很有wordpress的感觉，不知道是不是一家的。先预览一下：
代码：
package action;
import java.io.File;
import java.io.FileInputStream;
import java.io.FileOutputStream;
import java.io.InputStream;
import java.io.OutputStream;
import java.io.PrintWriter;
import javax.servlet.http.HttpServletResponse;
import org.apache.struts2.ServletActionContext;
import util.DateUtil;
import com.opensymphony.xwork2.ActionSupport;
public class UploadFile extends ActionSupport{
private File upload;
private String uploadContentType;
private String uploadFileName;
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 execute() throws Exception {
HttpServletResponse response = ServletActionContext.getResponse();
response.setCharacterEncoding("GBK");
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("<script type=\"text/javascript\">");
out.println("window.parent.CKEDITOR.tools.callFunction(" + callback + ",‘‘," + "‘文件格式不正确（必须为.jpg/.gif/.bmp/.png文件）‘);");
out.println("</script>");
return null;
}
if(upload.length() > 600*1024){
out.println("<script type=\"text/javascript\">");
out.println("window.parent.CKEDITOR.tools.callFunction(" + callback + ",‘‘," + "‘文件大小不得大于600k‘);");
out.println("</script>");
return null;
}
InputStream is = new FileInputStream(upload);
String uploadPath = ServletActionContext.getServletContext().getRealPath("img/upload/"+DateUtil.getDirDate());
System.out.println("uploadpath:"+uploadPath);
File dirfile=new File(uploadPath);
if(!dirfile.exists()){
dirfile.mkdirs();
}
String fileName = DateUtil.getDate(); //采用时间+UUID的方式随即命名
fileName += expandedName;
System.out.println("filename:"+fileName);
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("<script type=\"text/javascript\">");
out.println("window.parent.CKEDITOR.tools.callFunction(" + callback + ",‘" + "img/upload/"+ DateUtil.getDirDate() +"/"+ fileName + "‘,‘‘)");
out.println("</script>");
return null;
}
}
里面用到一个时间的工具类，用于按照时间创建目录和文件名字。文件名字精确到秒，以免发生名称重复。
其中：
out.println("window.parent.CKEDITOR.tools.callFunction(" + callback + ",‘" + "img/upload/"+ DateUtil.getDirDate() +"/"+ fileName + "‘,‘‘)");
这一句是上传图片后，返回给编辑器的一个图片路径地址。
时间工具类：
package com.util;
import java.util.Calendar;
public class DateUtil {
public static String getDate(){
Calendar calendar=Calendar.getInstance();
int y=calendar.get(Calendar.YEAR);
int m=calendar.get(Calendar.MONTH);
int d=calendar.get(Calendar.DATE);
int h=calendar.get(Calendar.HOUR);
int mi=calendar.get(Calendar.MINUTE);
int s=calendar.get(Calendar.SECOND);
StringBuffer sb=new StringBuffer("");
sb.append(y);
sb.append(m+1);
sb.append(d);
sb.append(h);
sb.append(mi);
sb.append(s);
String date=sb.toString();
return date;
}
public static String getDirDate(){
Calendar calendar=Calendar.getInstance();
int y=calendar.get(Calendar.YEAR);
int m=calendar.get(Calendar.MONTH);
int d=calendar.get(Calendar.DATE);
StringBuffer sb=new StringBuffer("");
sb.append(y);
sb.append(m+1);
sb.append(d);
String date=sb.toString();
return date;
}
}
其中很有意思的是，上面获取的月份，比当前月份要少一个月，不知道这个是怎么理解（有人说老外是从0开始计算月份的，呵呵），于是加1代表当前月份。
然后在struts.xml中，配置一个action即可，不需要result，返回为null的。
<action name="uploadfile" class="indexAction" method="uploadfile">
</action>
哦，既然有action，当然要有请求他的。这个请求是点击上传时候发生的，在config.js配置：
//个人的配置
config.filebrowserUploadUrl="/uploadfile.html";
在结束前插入这一句。我这里后面是html，是因为url重写的。默认情况就是上面的action name。
然后就是在各个页面引入编辑器框架。
<!-- 插入ckeditor -->
<textarea rows="70" cols="80" name="content"></textarea>
还要引入以下这个js：
<script type="text/javascript">CKEDITOR.replace(‘content‘);</script>
<script type="text/javascript">
window.onload = function()
{
CKEDITOR.replace( ‘content‘ );
};
</script>
最后是在页面头部引入框架的js：
<script type="text/javascript" src="${webroot}/plugins/ckeditor/ckeditor.js"></script>
顺序貌似说反了，大概就是这样。这个真心比百度编辑器好用，整合也简单方便。
struts2+ckeditor配置图片上传
时间： 2024-11-04 10:51:39