KindEditor 4.0.4在spring+freemarker下的使用

主题: KindEditor 4.0.4在spring+freemarker下的使用

作者: chen, 发布日期: 2012-01-10 22:49:13, 浏览数: 5528

把3.*升级到最新的4.0.4, 今天花了一整天, 整整一天啊!!! 我承认我很菜。不过有几个坑确实是文档里没有提到的, 我把解决经验帖在这里吧, 方便后来人.

(1) 按照文档操作, 新版kindEditor显示在页面上了, 这一步很顺利. 但保存时文章还是原样没变, 经查form值里没有文章内容.我是用的jquery的serializeArray方法如下代码. 没办法, 自己写了一个putFormArrayValue方法遍历formdata把文章内容塞进去. 以前3.*版不需要这一步, 自动绑定了.

	var content = EditorObject.html();
	var formdata = $("#form1").serializeArray();
	Commons.putFormArrayValue(formdata, 'content', content);

(2)图片上传功能,升级后没做什么改动. 接下来, 图片管理功能出了问题,耗时不少. 我的访问URL设计成REST,所以fileManagerJson的值没有jsp或php这样的后缀.

    KindEditor.ready(function(K) {
	    window.EditorObject = K.create('#content_editor', {
			allowFileManager:true,
			fileManagerJson:'/admin/uploadImageListForKindEditor',
                        uploadJson : '/admin/uploadImageForKindEditor'
	    });
    });

对应的Controller中的方法如下, 开始我以为是kindEditor是ajax调用, 所以要返回一个json string给它, 所以在Controller的ResponseBody返回方式上做了个种尝试,都没成功. 最后是参考了KindEditor中JSP例子,将JSP代码转成Controller中的Java代码. 如下

	//ResponseBody
	@RequestMapping(value = "/admin/uploadImageListForKindEditor", method = RequestMethod.GET)
	public Object test2(HttpServletRequest request, Model model) {
		String rootPath = "D:/work/workspace/yowob/src/main/webapp/static/"; 
		//String rootUrl = "http://www.yowob.com/static/";  //带http://完整也可以的
		String rootUrl = "/static/";  //我所有ftl的head里都有base设置,就不要前缀也罢
                //图片扩展名
		String[] fileTypes = new String[] { "gif", "jpg", "jpeg", "png", "bmp" };
		String dirName = request.getParameter("dir");
		if (dirName != null) {
			if (dirName.equals("image")) {
				dirName = "images"; //生硬的转一下
			}
			if (!Arrays.asList(new String[] { "images", "files" }).contains(dirName)) {
				model.addAttribute("msg", "Invalid Directory name.");
				return "/commons/message"; 
			}


                .........
                .........

		JSONObject result = new JSONObject();
		result.put("moveup_dir_path", moveupDirPath);
		result.put("current_dir_path", currentDirPath);
		result.put("current_url", currentUrl);
		result.put("total_count", fileList.size());
		result.put("file_list", fileList);
		//		response.setContentType("application/json; charset=UTF-8");
		//		out.println(result.toJSONString());
		String s = result.toString(); 
		log.info(s);
		model.addAttribute("json", s);
		return "/commons/json";
   }

其中:

1) request中有个dir参数是返回固定的image(上传图片时), 而我的目录名是images,所以要很生硬的转一下

2) 返回的commons/json是commons目录下的json.ftl, 其内容如下.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="application/json;charset=UTF-8" />
</head>
<body>
${json}
</body>
</html>

我的目录结构如下:

D:\work\workspace\yowob\src\main\webapp\static\目录下有两子目录images和files,一个放图像,一个放普通上传的文件. webapp是应用根目录

D:\work\workspace\yowob\src\main\webapp\WEB-INF\freemarker 里放*.ftl

(这论坛的验证码也太长了点吧, 有必要吗?)

作者: 小石头, 发布日期: 2012-01-11 17:12:51

太厉害了支持一个先！

论坛 Forum