ckeditor在jsp下增加图片上传功能
ckeditor配合ckfinder是可以实现图片上传功能的，但是只有php和asp支持，找了几天资料，终于成功在jsp上也实现了这个功能。
参考资料:http://blog.163.com/ytrtfhj@126/blog/static/890531092010226023136/
先来效果图
首先在编辑器完全生成后调用addUploadButton(editor)函数，传入编辑器变量，建议在CKEDITOR.replace之后直接使用.
function addUploadButton(editor){
CKEDITOR.on('dialogDefinition', function( ev ){
var dialogName = ev.data.name;
var dialogDefinition = ev.data.definition;
if ( dialogName == 'image' ){
var infoTab = dialogDefinition.getContents( 'info' );
infoTab.add({
type : 'button',
id : 'upload_image',
align : 'center',
label : '上传',
onClick : function( evt ){
var thisDialog = this.getDialog();
var txtUrlObj = thisDialog.getContentElement('info', 'txtUrl');
var txtUrlId = txtUrlObj.getInputElement().$.id;
addUploadImage(txtUrlId);
}
}, 'browse'); //place front of the browser button
}
});
}
function addUploadImage(theURLElementId){
var uploadUrl = "upload.jsp"; //这是我自己的处理文件/图片上传的页面URL
var imgUrl = window.showModalDialog(uploadUrl);
//在upload结束后通过js代码window.returnValue=...可以将图片url返回给imgUrl变量。
var urlObj = document.getElementById(theURLElementId);
urlObj.value = imgUrl;
//alert(urlObj.value);
//urlObj.fireEvent("onchange"); //触发url文本框的onchange事件，以便预览图片
//urlObj.fireEvent("onchange");
//urlObj.onchange();
//以下仅支持firefox
var evt = document.createEvent('HTMLEvents');
evt.initEvent('change',true,true);
urlObj.dispatchEvent( evt );
}
这里必须提醒的是要注意不同的浏览器事件驱动是不一样的，这个地方卡了我好久，因为我用firefox调试的原因，urlObj.fireEvent("onchange"); 这句代码是不起作用的。
addUploadImage函数指定文件上传页面的URL，然后在一个模态窗口中打开这个页面，处理文件上传。最终的结果是将图片上传后在服务器上的URL地址返回给一个变量imgUrl。最后把这个变量赋值给传进来的图片URL文本框里。最后手工触发一下onchange事件，这样在image对话框里就能看到图片的预览效果了。
以下为上传jsp页面:
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%><%String path = request.getContextPath();String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";%><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html> <head> <base href="<%=basePath%>"> <title>My JSP 'index.jsp' starting page</title><meta http-equiv="pragma" content="no-cache"><meta http-equiv="cache-control" content="no-cache"><meta http-equiv="expires" content="0"> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"><meta http-equiv="description" content="This is my page"><!--<link rel="stylesheet" type="text/css" href="styles.css">--> </head> <body> <form name="form1" method="post" action="imgUpload.do" id="form1" enctype="multipart/form-data"> <input type="file" name="imgFile" id="fuPhoto" title="选择图片" /> <input type="submit" value="上 传" id="btnUpload" onclick="close"/> <input type="hidden" value="${requestScope.pagePath}" name="pagePath" id="_pagePath" /> </form> <script type="text/javascript"> var _pagePath = document.getElementById("_pagePath").value;//alert(_pagePath); if(null!=_pagePath && ""!=_pagePath){ window.returnValue=_pagePath; window.close(); } </script> </body></html>上传的后台处理我用struts1.2写的
UploadForm:
package com.newsManage_10.struts.form;import org.apache.struts.action.ActionForm;import org.apache.struts.upload.FormFile;public class UploadForm extends ActionForm {private static final long serialVersionUID = 1L;private FormFile imgFile;public FormFile getImgFile() { return imgFile;}public void setImgFile(FormFile imgFile) { this.imgFile = imgFile;}}ImgUploadAction:
package com.newsManage_10.struts.action;import java.io.File;import java.io.FileNotFoundException;import java.io.FileOutputStream;import java.io.IOException;import java.io.InputStream;import java.io.OutputStream;import java.util.Date;import javax.servlet.ServletContext;import javax.servlet.http.HttpServletRequest;import javax.servlet.http.HttpServletResponse;import org.apache.struts.action.ActionForm;import org.apache.struts.action.ActionForward;import org.apache.struts.action.ActionMapping;import org.apache.struts.actions.DispatchAction;import org.apache.struts.upload.FormFile;import com.newsManage_10.struts.form.UploadForm;public class ImgUploadAction extends DispatchAction {@Overrideprotected ActionForward unspecified(ActionMapping mapping, ActionForm form,HttpServletRequest request, HttpServletResponse response)throws Exception {System.out.println("上传图片");//获取webroot目录下的upload文件夹的地址,注意要是加入了spring会报空指针异常要更改为//ServletContext servletContext = request.getSession().getServletContext();//String url = servletContext.getRealPath("/upload") + "\\";String url = servlet.getServletContext().getRealPath("/upload") + "\\"; int fsize = 5 * 1024 * 1024;UploadForm upf = (UploadForm) form;FormFile ffi = upf.getImgFile();String fileName = ffi.getFileName();if (!((fileName.toLowerCase().endsWith(".jpg"))|| (fileName.toLowerCase().endsWith(".gif")) || (fileName.toLowerCase().endsWith(".png")))) {System.out.println("文件类型错误不能上传");return null;}if (ffi.getFileSize() > fsize) {System.out.println("文件大于限定大小不能上传");return null;}String fname = null; //完整地址String shortName = null; //文件名含后缀try {if ("".equals(fileName)) {return null;}InputStream stream = ffi.getInputStream();String extendFile = null;if (isJpg(fileName))extendFile = ".jpg";else if (isGif(fileName))extendFile = ".gif";else if (isPng(fileName))extendFile = ".png";elseextendFile = ".jpg";shortName = timename() + extendFile;fname = url + shortName;//重命名File imgFile = new File(fname);//如果不存在先创建if(!imgFile.exists()){imgFile.createNewFile();}//写入服务器OutputStream bos = new FileOutputStream(imgFile);int bytesRead = 0;byte[] buffer = new byte[8192];while ((bytesRead = stream.read(buffer, 0, 8192)) != -1) {bos.write(buffer, 0, bytesRead);}bos.close();stream.close();} catch (FileNotFoundException fnfe) {fnfe.printStackTrace();} catch (IOException ioe) {ioe.printStackTrace();} catch (NullPointerException e) {e.printStackTrace();}//不能存d:\这种地址,要urlString path = "http://" + request.getServerName() + ":" + request.getServerPort() + request.getContextPath() + "/upload/" + shortName;request.setAttribute("pagePath", path);return mapping.findForward("success");//跳转到成功页面}//时间命名图片public static String timename() {String name = null;name = Long.toString(new Date().getTime());return name;}//-----文件类型判断------public static boolean isGif(String file) {if (file.toLowerCase().endsWith(".gif")) {return true;} else {return false;}}public static boolean isJpg(String file) {if (file.toLowerCase().endsWith(".jpg")) {return true;} else {return false;}}public static boolean isPng(String file) {if (file.toLowerCase().endsWith(".png")) {return true;} else {return false;}}}struts的配置文件相关部分由于我用了spring所以type内容有所不同
<action name="UploadForm" path="/imgUpload" scope="request" type="org.springframework.web.struts.DelegatingActionProxy" parameter="method"> <forward name="success" path="/upload.jsp" /> </action>
<form-bean name="UploadForm" type="com.newsManage_10.struts.form.UploadForm" />
在哪里,链接呢
10 楼 mikkjl 2010-09-07 已经不用fck了 载入很慢 （没做优化的情况） 11 楼 erikchang 2010-09-09 FCK有java版的，楼主这样做复杂了！！ 12 楼 181054867 2011-01-18 CKeditor的UI做得太差，FCK还好些，功能比KindEditor做得好，但整个编辑器不易用