ckeditor+struts2实现图片上传功能

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

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

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

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

4、JSP页面内容

<tr> 
                <td height="80" align="right" bgcolor="#EEEEEE">内容：</td>
                <td align="left" bgcolor="#FFFFFF"><s:textarea id="contenten" name="contenten" cols="50" rows="10"/></td>
</tr>

<script type="text/javascript" src="${pageContext.request.contextPath}/js/ckeditor/ckeditor.js"></script>
 <script type="text/javascript">  
//在id为content的textarea处创建一个编辑器  
CKEDITOR.replace('contenten');   
</script>

5、struts2中的配置显示

<struts>
    <package name="manage" extends="jwnet-default" namespace="/manage">

<action name="ckeditorUpload" class="org.chikuhou.rpl.web.action.manage.CkeditorUpFileAction" method="ckeditorUpload">
          <result name="success" type="stream"></result>
       </action>
    </package>
</struts>

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中默认的属性名  文件名+ContentTypeprivate String uploadFileName;//struts中默认的属性名  文件名+FileNamepublic 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/jpegexpandedName = ".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("/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("<script type=\"text/javascript\">");out.println("window.parent.CKEDITOR.tools.callFunction(" + callback+ ",'" +ServletActionContext.getRequest().getContextPath()+ "/ckeditorImg/" + fileName + "','')");out.println("</script>");return null;} }