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頁面內容

<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;} }