2.【编辑器】模仿iteye的编辑器附件上传功能

j夫子

浏览: 92562 次
性别:

最近访客更多访客>>

追逐什么

haigangyuan2011

wsyyzzxy

ganliang13

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

所用到的编辑器:kindeditor-v4.0.6
先看图：

个人觉得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;
		}
	}
}