先看图:
个人觉得kd比fckeditor要好用一些。
虽然编辑器是有自带的上传功能的,但是确实也有不方便之处。所以自己手动做一个。
关于jsp中整合editor的内容就不赘述了。
我这里用的是kindeditor的simple模式,比较简洁。
1,首先给出upload.jsp的代码
<%@ include file="/WEB-INF/page/share/taglib.jsp" %> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <body> 上传附件: <html:form action="/attachedUpload" method="post" enctype="multipart/form-data"> <input type="file" name="file"/><input type="submit" value="上传"/> </html:form> 您最近上传的附件:<br/> <c:forEach items="${attacheds}" var="data"> <c:if test="${data.ext=='img'}"> 附件:<img src="${data.path}" width="20" height="20"/> <input type="button" name="${data.path}" onClick="javascript:parent.insertAttached('${data.path}','${data.ext}');" value="插入到编辑器"><br/> </c:if> <c:if test="${data.ext=='file'}"> 附件:<img src="<%=request.getContextPath() %>/img/file.png" width="20" height="20"/> <input type="button" name="${data.path}" onClick="javascript:parent.insertAttached('${data.path}','${data.ext}');" value="插入到编辑器"><br/> </c:if> </c:forEach> </body> </html>
@这个jsp 是要以frame的形式嵌入到文章发表界面。
这里面区分了图片文件和普通文件,若上传的是图片文件 则点【插入编辑器】后 编辑器的光标位置会加入<img src='...'/>,反之则加入<a href='...'></a>。从开头的那张图可以看得出来。
2.然后是【插入到编辑器】这个按钮,点击后调用父窗口的.insertAttached 方法。该方法在帖子发表页面中声明。
function insertAttached(src,ext){ if(ext=="img"){ var html = "<img src='"+src+"'/>"; }else{ var html = "<a href='"+src+"'>【附件:编辑附件名称】</a>"; } editor.insertHtml(html); }
@关于editor 这个对象,是kindeditor内置的,在jsp页面中引入该编辑器时创建。
editor.insertHtml(html)这个方法则是在光标位置插入内容。
可以参看 kindeditor 的文档 http://www.kindsoft.net/docs/editor.html#inserthtml-val
3.好了,现在去看看后端是怎么做的.
环境:struts1.3 hibernate3 spring2.5
首先在加载upload.jsp之前,先访问/attachedUpload.do
/** * 附件上传 * @author 赵俊夫 * * 2012-4-18 */ @Controller(value="/attachedUpload") public class AttachedUploadAction extends Action { @Resource(name="attachedDao") private AttachedDao attachedDao; @Override public ActionForward execute(ActionMapping mapping, ActionForm form, HttpServletRequest request, HttpServletResponse response) throws Exception { /**Struts1 的 formbean*/ AttachedForm f = (AttachedForm) form; /**创建一个附件 对象 我们这里把附件定义成对象,在数据库中与用户Many to one 关联*/ Attached attached=null; /**工具类 作用:拿到session中的登录用户*/ UserUtil uu = new UserUtil(request); User loginUser = uu.getLoginUser(); /**如果已经登录*/ if(loginUser!=null){ if(f.getFile()!=null){ /** 工具类:读配置文件*/ OptionBean op = new OptionBean(request); /**上传格式校验*/ if(!UploadUtil.validateUploadAll(f.getFile())){ request.setAttribute("message", "格式不允许!"); request.setAttribute("urladdress", UrlUtil.parseUrl(request, "upload")); return mapping.findForward("message"); } /**上传文件后会有信息返回:文件的路径等*/ UploadBean bean = UploadUtil.doUploadByTime(f.getFile(), op.getAttachedLocation(), request); String id = bean.getCode(); String path = bean.getvPath(); attached = new Attached(); attached.setId(id); attached.setPath(path); /**附件与用户多对一关联*/ attached.setUser(loginUser); /**将附件持久化到数据库*/ attachedDao.persist(attached); } } /**获取当前用户最近上传的10条附件记录 并发送到request区域供.jsp页面使用*/ Set<Criterion> criterions = new LinkedHashSet<Criterion>(); criterions.add(Restrictions.eq("user", loginUser)); Set<Order> orders = new LinkedHashSet<Order>(); orders.add(Order.desc("date")); List<Attached> datas = attachedDao.getScrollData(Attached.class, 0, 10, criterions, orders); /** * 数据存放 */ request.setAttribute("attacheds", datas); return mapping.findForward("upload"); } }
有点乱了,今天才把fckeditor换掉了,在iteye喜欢上了简洁。
上面代码用到了UploadUtil
代码如下:
public class UploadUtil { /**图片格式数组*/ public static final String[] imageExts = {".gif",".jpg",".jpeg",".png",".tmp"}; /**文件格式数组*/ public static final String[] fileExts = {".rar",".zip"}; @SuppressWarnings("deprecation") public static UploadBean doUploadByTime(FormFile formfile,String path,HttpServletRequest request) throws FileNotFoundException, IOException{ String ext = HeadPic.getExt(formfile.getFileName()); String fmt = new SimpleDateFormat("yyyyMMddhhmmss").format(new Date())+new Random().nextInt(1000); String code = fmt; String filename = code+ext; byte[] filedata = formfile.getFileData(); String realPath = request.getRealPath(path); File dir = new File(realPath); if(!dir.exists()){ dir.mkdirs(); } String filePath = realPath+File.separator+filename; String vPath = request.getContextPath()+path+filename; FileOutputStream fos = new FileOutputStream(new File(filePath)); fos.write(filedata); fos.close(); UploadBean bean = new UploadBean(); bean.setCode(code); bean.setvPath(vPath); return bean; } public static boolean validateUpload(FormFile formfile,String[] allowTypes){ String filename = formfile.getFileName(); String ext = HeadPic.getExt(filename); for(String t:allowTypes){ if(t.toLowerCase().equals(ext.toLowerCase())){ return true; } } return false; } public static boolean validateUploadImage(FormFile formfile){ if(validateUpload(formfile, imageExts)) return true; else return false; } public static boolean validateUploadFile(FormFile formfile){ if(validateUpload(formfile, fileExts)) return true; else return false; } public static boolean validateUploadAll(FormFile formfile){ if(validateUploadFile(formfile) || validateUploadImage(formfile)){ return true; } else{ return false; } } }