KindEditor之本地图片上传

       今日整合某项目的博客发表功能，需要用到在线编译器，在网上搜索了一大堆后决定采用ckeditor+ckfinder，但是使用过程中发现此插件太大，且自定义，权限方面的配置工作过于复杂，加之国内中文帮助文档较少，所以最后还是弃了ck用了ke。

废话不说了，进入正题

一，先去KindEditor下载http://www.kindsoft.net/相应包，如果你项目使用的是jsp记得将jsp/lib下的内容加入到你的项目中，具体怎么操作就不一步一步详解了，直接总结问题。

二， 整合出现的问题：

1，KindEditor对象未定义

解决方法：

这个肯定是你引入kindeditor.js时，路径有问题或js加载顺序的问题

2，图片上传路径问题

解决方法：

修改此段

//文件保存目录路径（改成自己的路径）
String savePath = pageContext.getServletContext().getRealPath("/") + "blogimage/";

//文件保存目录URL（改成自己的url）
String saveUrl  = request.getContextPath() + "/blogimage/";

3，上传本地图片时没有写入权限

原因：这个是由于webxml中的过滤器

 

<filter>
  <filter-name>struts2</filter-name>
  <filter-class>org.apache.struts2.dispatcher.FilterDispatcher</filter-class>
 </filter>

   <filter-mapping>
  <filter-name>struts2</filter-name>
  <url-pattern>*.jsp</url-pattern>
 </filter-mapping> 

解决办法：

如果你项目中*.jsp可以改成*.action,那你就只需要重写upload_json.jsp即可；

upload_json.jsp代码重写如下，出处（http://www.kindsoft.net/view.php?bbsid=7&postid=2561&pagenum=3）：

 

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
　　　　<%@ page import="java.util.*,java.io.*"%>
　　　　<%@ page import="java.text.SimpleDateFormat"%>
　　　　<%@ page import="org.apache.commons.fileupload.*"%>
　　　　<%@ page import="org.apache.commons.fileupload.disk.*"%>
　　　　<%@ page import="org.apache.commons.fileupload.servlet.*"%>
　　　　<%@ page import="com.opensymphony.xwork2.ActionContext"%>
　　　　<%@ page import="org.apache.struts2.dispatcher.multipart.MultiPartRequestWrapper"%>
　　　　<%@ page import="org.json.simple.*"%>

　　　　<%
　　　　　　　　//文件保存目录路径 img_upload是服务器存储上传图片的目录名
　　　　　　　　String savePath = request.getSession().getServletContext().getRealPath("/")+ "img_upload/";

　　　　　　　　//文件保存目录URL
　　　　　　　　String saveUrl = request.getContextPath() + "/img_upload/";

　　　　　　　　//定义允许上传的文件扩展名
　　　　　　　　String[] fileTypes = new String[] { "gif", "jpg", "jpeg", "png","bmp" };

　　　　　　　　//允许最大上传文件大小
　　　　　　　　long maxSize = 1024000;

　　　　　　　　//Struts2 请求 包装过滤器
　　　　　　　　MultiPartRequestWrapper wrapper = (MultiPartRequestWrapper) request;

　　　　　　　　//获得上传的文件名
　　　　　　　　String fileName = wrapper.getFileNames("imgFile")[0];

　　　　　　　　//获得文件过滤器
　　　　　　　　File file = wrapper.getFiles("imgFile")[0];

　　　　　　　　//得到上传文件的扩展名
　　　　　　　　String fileExt = fileName.substring(fileName.lastIndexOf(".") + 1).toLowerCase();

　　　　　　　　//检查扩展名
　　　　　　　　if (!Arrays.<String> asList(fileTypes).contains(fileExt)) {
　　　　　　　　 out.println(getError("上传文件扩展名是不允许的扩展名。"));
　　　　　　　　 return;
　　　　　　　　}
　　　　　　　　//检查文件大小
　　　　　　　　if (file.length() > maxSize) {
　　　　　　　　 out.println(getError("上传文件大小超过限制。"));
　　　　　　　　 return;
　　　　　　　　} 

　　　　　　　　//检查目录
　　　　　　　　File uploadDir = new File(savePath);
　　　　　　　　if (!uploadDir.isDirectory()) {
　　　　　　　　 out.println(getError("上传目录不存在。"));
　　　　　　　　 return;
　　　　　　　　}
　　　　　　　　//检查目录写入权限
　　　　　　　　if (!uploadDir.canWrite()) {
　　　　　　　　 out.println(getError("上传目录没有写入权限。"));
　　　　　　　　 return;
　　　　　　　　}

　　　　　　　　//重构上传图片的名称 
　　　　　　　　SimpleDateFormat df = new SimpleDateFormat("yyyyMMddHHmmss");
　　　　　　　　String newImgName = df.format(new Date()) + "_"+ new Random().nextInt(1000) + "." + fileExt;

　　　　　　　　//设置 KE 中的图片文件地址
　　　　String newFileName = request.getScheme() + "://"+ request.getServerName() + ":" + request.getServerPort()
　　　　　　　　+ saveUrl + newImgName;

　　　　　　　　byte[] buffer = new byte[1024];

　　　　　　　　//获取文件输出流
　　　　　　　　FileOutputStream fos = new FileOutputStream(savePath + newImgName);

　　　　　　　　//获取内存中当前文件输入流
　　　　　　　　InputStream in = new FileInputStream(file);

　　　　　　　　try {
　　　　　　　　          int num = 0;
　　　　　　　　　　 while ((num = in.read(buffer)) > 0) {
　　　　　　　　         fos.write(buffer, 0, num);
　　　　　　　　 }
　　　　　　　　} catch (Exception e) {
　　　　　　　　        e.printStackTrace(System.err);
　　　　　　　　} finally {
　　　　　　　      　  in.close();
　　　　　　　　        fos.close();
　　　　　　　　}

　　　　　　　　//发送给 KE 

　　　　　　　　JSONObject obj = new JSONObject();
　　　　　　　　obj.put("error", 0);
　　　　　　　　obj.put("url", saveUrl + newImgName);
　　　　　　　　out.println(obj.toJSONString());
　　　　　　　　%>
　　　　　　　　<%!private String getError(String message) {
　　　　　　　　 JSONObject obj = new JSONObject();
　　　　　　　　 obj.put("error", 1);
　　　　　　　　 obj.put("message", message);
　　　　　　　　 return obj.toJSONString();
　　　　　　　　}
　　　　　　　　%>

          为什么需要重写upload_json.jsp，是因为structs2对request进行了包装，导致页面中的file对象为空，所以我们需要使用到MultiPartRequestWrapper 进行处理，具体过程可查看它的源码及实现过程。

         因为我项目中使用到了structs2的标签，所以不加*.jsp的过滤器则会导致项目中的structs2的标签无法正常使用。

因此上面的解决方法不适用于我的项目，项目中唯一的解决方法是将upload_json.jsp重写成servlet或structs2的action，重写过程中会用到response.getWriter().println(str)

如有错误之处，请各位大侠赐教

可提供ckeditor+ckfinder整合的简单demo，需要可留言