KindEditor上传本地图片

自己动手配置了一下KindEditor文本编辑器上传本地图片的功能，不需要动手写action，相关详细配置和代码如下。
我用的是KindEditor 4.1.10的版本，需要用到的童鞋去下载对应的版本。

1.↓↓↓这个插件里面需要手动配置的两个重要的jsp文件。

2.↓↓↓需要你在WebRoot根目录下创建图片上传路径(必须创建不然会报目录不存在的错误-KindEditor的本地上传是把图片放到服务器里)。

3.在对应的页面你需要引入的包还有相应的代码。
↓↓↓包

↓↓↓代码

4.文本区设置name值
↓↓↓代码

ok话不多说继续上代码。
5.引入缺失的jar包，从网上下载的几个版本的kindEditor我发现都缺一个叫
json_simple-1.1.jar的包，看情况是否要Build Path，反正我的机子不用2333

首先是upload_json.jsp里的

↓↓↓

<%@ 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.json.simple.*" %><%/** * KindEditor JSP *///根目录路径，可以指定绝对路径，比如 /var/www/attached/String rootPath = pageContext.getServletContext().getRealPath("/") + "attached/";//根目录URL，可以指定绝对路径，比如 http://www.yoursite.com/attached/String rootUrl  = request.getContextPath() + "/attached/";//图片扩展名String[] fileTypes = new String[]{"gif", "jpg", "jpeg", "png", "bmp"};String dirName = request.getParameter("dir");if (dirName != null) {    if(!Arrays.<String>asList(new String[]{"image", "flash", "media", "file"}).contains(dirName)){        out.println("Invalid Directory name.");        return;    }    rootPath += dirName + "/";    rootUrl += dirName + "/";    File saveDirFile = new File(rootPath);    if (!saveDirFile.exists()) {        saveDirFile.mkdirs();    }}//根据path参数，设置各路径和URLString path = request.getParameter("path") != null ? request.getParameter("path") : "";String currentPath = rootPath + path;String currentUrl = rootUrl + path;String currentDirPath = path;String moveupDirPath = "";if (!"".equals(path)) {    String str = currentDirPath.substring(0, currentDirPath.length() - 1);    moveupDirPath = str.lastIndexOf("/") >= 0 ? str.substring(0, str.lastIndexOf("/") + 1) : "";}//排序形式，name or size or typeString order = request.getParameter("order") != null ? request.getParameter("order").toLowerCase() : "name";//不允许使用..移动到上一级目录if (path.indexOf("..") >= 0) {    out.println("Access is not allowed.");    return;}//最后一个字符不是/if (!"".equals(path) && !path.endsWith("/")) {    out.println("Parameter is not valid.");    return;}//目录不存在或不是目录File currentPathFile = new File(currentPath);if(!currentPathFile.isDirectory()){    out.println("Directory does not exist.");    return;}//遍历目录取的文件信息List<Hashtable> fileList = new ArrayList<Hashtable>();if(currentPathFile.listFiles() != null) {    for (File file : currentPathFile.listFiles()) {        Hashtable<String, Object> hash = new Hashtable<String, Object>();        String fileName = file.getName();        if(file.isDirectory()) {            hash.put("is_dir", true);            hash.put("has_file", (file.listFiles() != null));            hash.put("filesize", 0L);            hash.put("is_photo", false);            hash.put("filetype", "");        } else if(file.isFile()){            String fileExt = fileName.substring(fileName.lastIndexOf(".") + 1).toLowerCase();            hash.put("is_dir", false);            hash.put("has_file", false);            hash.put("filesize", file.length());            hash.put("is_photo", Arrays.<String>asList(fileTypes).contains(fileExt));            hash.put("filetype", fileExt);        }        hash.put("filename", fileName);        hash.put("datetime", new SimpleDateFormat("yyyy-MM-dd HH:mm:ss").format(file.lastModified()));        fileList.add(hash);    }}if ("size".equals(order)) {    Collections.sort(fileList, new SizeComparator());} else if ("type".equals(order)) {    Collections.sort(fileList, new TypeComparator());} else {    Collections.sort(fileList, new NameComparator());}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());%><%!public class NameComparator implements Comparator {    public int compare(Object a, Object b) {        Hashtable hashA = (Hashtable)a;        Hashtable hashB = (Hashtable)b;        if (((Boolean)hashA.get("is_dir")) && !((Boolean)hashB.get("is_dir"))) {            return -1;        } else if (!((Boolean)hashA.get("is_dir")) && ((Boolean)hashB.get("is_dir"))) {            return 1;        } else {            return ((String)hashA.get("filename")).compareTo((String)hashB.get("filename"));        }    }}public class SizeComparator implements Comparator {    public int compare(Object a, Object b) {        Hashtable hashA = (Hashtable)a;        Hashtable hashB = (Hashtable)b;        if (((Boolean)hashA.get("is_dir")) && !((Boolean)hashB.get("is_dir"))) {            return -1;        } else if (!((Boolean)hashA.get("is_dir")) && ((Boolean)hashB.get("is_dir"))) {            return 1;        } else {            if (((Long)hashA.get("filesize")) > ((Long)hashB.get("filesize"))) {                return 1;            } else if (((Long)hashA.get("filesize")) < ((Long)hashB.get("filesize"))) {                return -1;            } else {                return 0;            }        }    }}public class TypeComparator implements Comparator {    public int compare(Object a, Object b) {        Hashtable hashA = (Hashtable)a;        Hashtable hashB = (Hashtable)b;        if (((Boolean)hashA.get("is_dir")) && !((Boolean)hashB.get("is_dir"))) {            return -1;        } else if (!((Boolean)hashA.get("is_dir")) && ((Boolean)hashB.get("is_dir"))) {            return 1;        } else {            return ((String)hashA.get("filetype")).compareTo((String)hashB.get("filetype"));        }    }}%>

然后是file_manager_json.jsp里的

↓↓↓

<%@ 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.json.simple.*" %><%/** * KindEditor JSP *///根目录路径，可以指定绝对路径，比如 /var/www/attached/String rootPath = pageContext.getServletContext().getRealPath("/") + "attached/";//根目录URL，可以指定绝对路径，比如 http://www.yoursite.com/attached/String rootUrl  = request.getContextPath() + "/attached/";//图片扩展名String[] fileTypes = new String[]{"gif", "jpg", "jpeg", "png", "bmp"};String dirName = request.getParameter("dir");if (dirName != null) {    if(!Arrays.<String>asList(new String[]{"image", "flash", "media", "file"}).contains(dirName)){        out.println("Invalid Directory name.");        return;    }    rootPath += dirName + "/";    rootUrl += dirName + "/";    File saveDirFile = new File(rootPath);    if (!saveDirFile.exists()) {        saveDirFile.mkdirs();    }}//根据path参数，设置各路径和URLString path = request.getParameter("path") != null ? request.getParameter("path") : "";String currentPath = rootPath + path;String currentUrl = rootUrl + path;String currentDirPath = path;String moveupDirPath = "";if (!"".equals(path)) {    String str = currentDirPath.substring(0, currentDirPath.length() - 1);    moveupDirPath = str.lastIndexOf("/") >= 0 ? str.substring(0, str.lastIndexOf("/") + 1) : "";}//排序形式，name or size or typeString order = request.getParameter("order") != null ? request.getParameter("order").toLowerCase() : "name";//不允许使用..移动到上一级目录if (path.indexOf("..") >= 0) {    out.println("Access is not allowed.");    return;}//最后一个字符不是/if (!"".equals(path) && !path.endsWith("/")) {    out.println("Parameter is not valid.");    return;}//如果页面上报错目录不存在，可以在这里打断点看看是不是能走到这一步,请自行在在WebRoot目录下创建attached文件夹//目录不存在或不是目录File currentPathFile = new File(currentPath); if(!currentPathFile.isDirectory()){    out.println("Directory does not exist.");    return;}//遍历目录取的文件信息List<Hashtable> fileList = new ArrayList<Hashtable>();if(currentPathFile.listFiles() != null) {    for (File file : currentPathFile.listFiles()) {        Hashtable<String, Object> hash = new Hashtable<String, Object>();        String fileName = file.getName();        if(file.isDirectory()) {            hash.put("is_dir", true);            hash.put("has_file", (file.listFiles() != null));            hash.put("filesize", 0L);            hash.put("is_photo", false);            hash.put("filetype", "");        } else if(file.isFile()){            String fileExt = fileName.substring(fileName.lastIndexOf(".") + 1).toLowerCase();            hash.put("is_dir", false);            hash.put("has_file", false);            hash.put("filesize", file.length());            hash.put("is_photo", Arrays.<String>asList(fileTypes).contains(fileExt));            hash.put("filetype", fileExt);        }        hash.put("filename", fileName);        hash.put("datetime", new SimpleDateFormat("yyyy-MM-dd HH:mm:ss").format(file.lastModified()));        fileList.add(hash);    }}if ("size".equals(order)) {    Collections.sort(fileList, new SizeComparator());} else if ("type".equals(order)) {    Collections.sort(fileList, new TypeComparator());} else {    Collections.sort(fileList, new NameComparator());}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());%><%!public class NameComparator implements Comparator {    public int compare(Object a, Object b) {        Hashtable hashA = (Hashtable)a;        Hashtable hashB = (Hashtable)b;        if (((Boolean)hashA.get("is_dir")) && !((Boolean)hashB.get("is_dir"))) {            return -1;        } else if (!((Boolean)hashA.get("is_dir")) && ((Boolean)hashB.get("is_dir"))) {            return 1;        } else {            return ((String)hashA.get("filename")).compareTo((String)hashB.get("filename"));        }    }}public class SizeComparator implements Comparator {    public int compare(Object a, Object b) {        Hashtable hashA = (Hashtable)a;        Hashtable hashB = (Hashtable)b;        if (((Boolean)hashA.get("is_dir")) && !((Boolean)hashB.get("is_dir"))) {            return -1;        } else if (!((Boolean)hashA.get("is_dir")) && ((Boolean)hashB.get("is_dir"))) {            return 1;        } else {            if (((Long)hashA.get("filesize")) > ((Long)hashB.get("filesize"))) {                return 1;            } else if (((Long)hashA.get("filesize")) < ((Long)hashB.get("filesize"))) {                return -1;            } else {                return 0;            }        }    }}public class TypeComparator implements Comparator {    public int compare(Object a, Object b) {        Hashtable hashA = (Hashtable)a;        Hashtable hashB = (Hashtable)b;        if (((Boolean)hashA.get("is_dir")) && !((Boolean)hashB.get("is_dir"))) {            return -1;        } else if (!((Boolean)hashA.get("is_dir")) && ((Boolean)hashB.get("is_dir"))) {            return 1;        } else {            return ((String)hashA.get("filetype")).compareTo((String)hashB.get("filetype"));        }    }}%>

然后是你对应的三段页面代码

<link rel="stylesheet" href="kindeditor/themes/default/default.css"/><script charset="utf-8" src="kindeditor/kindeditor-min.js"></script><script charset="utf-8" src="kindeditor/lang/zh_CN.js"></script>

<script language="javascript" type="text/javascript">       KindEditor.ready(function(K) {        var  editor1 = K.create('textarea[name="sysArticle.articleContent"]', {            resizeType : 1, //这里的name属性值和下面的对应，你改成你项目用的name属性值                    allowPreviewEmoticons : false,                    allowImageUpload : true, //打开本地上传图片功能                    items : [                          'source', '|', 'undo', 'redo', '|', 'preview', 'print', 'template', 'cut', 'copy', 'paste',        'plainpaste', 'wordpaste', '|', 'justifyleft', 'justifycenter', 'justifyright',        'justifyfull', 'insertorderedlist', 'insertunorderedlist', 'indent', 'outdent', 'subscript',        'superscript', 'clearhtml', 'quickformat', 'selectall', '|', 'fullscreen', '/',        'formatblock', 'fontname', 'fontsize', '|', 'forecolor', 'hilitecolor', 'bold',        'italic', 'underline', 'strikethrough', 'lineheight', 'removeformat', '|',       'table', 'hr','image'],//image打开本地上传图片必须写,重要的事情说三遍            afterBlur : function() {                     this.sync();  //焦点问题，这里不写会出问题.同步KindEditor的值到textarea文本框                  }                });                                 });       </script>

<textarea  style="width:400px;height:200px;"  name="sysArticle.articleContent"></textarea> <!-- 请自行设置文本区大小,但注意这里name属性值和上面那张图里的name值对应 -->

ok，到这里就大功告成了！
来看看我的效果图吧

这里我推荐使用copy js源码放到在线代码格式里看http://tool.oschina.net/codeformat/js/
在线代码格式化效果图

刚实习第三个月累死喵了！！！！