java项目中kindeditor的用法1

 kindeditor是一款很好的在线编辑插件，纯js编写，国产软件，使用也简单，值得支持！参考了它的官方文档，现把它的用法记录下来，以便以后查找。

 

一、到官网去下载。我下的是kindeditor-3.5.5-zh_CN.zip，当前比较稳定的版本。

 

二、解压之后，把它拷到你的项目的 WebRoot下。当然不是所有东西都有用，我拷的是下面几个：

commons-fileupload-1.2.1.jar

 commons-io-1.4.jar

 json_simple-1.1.jar      当然这几个jar包拷到你的项目的lib目录下。

 

三、在需要显示编辑器的位置添加TEXTAREA输入框。
id在当前页面必须是唯一的值，还有，在有些浏览器上不设宽度和高度可能显示有问题，所以最好设一下宽度和高度。宽度和高度可用inline样式设置，也可用编辑器初始化参数设置。

四、引入kindeditor的js文件，<script charset="utf-8" src="/EbusinessOfFxoh/kindeditor/kindeditor.js"></script>

注意要放在前面，否则会造成编辑器不显示，另外注意js文件的路径。

 

五、

<script>     

     KE.show({

                       id : 'detaileInfo',     /* 这个id要和textarea的id一致*/

                       imageUploadJson : '/EbusinessOfFxoh/kindeditor/jsp/upload_json2.jsp',

                       fileManagerJson : '/EbusinessOfFxoh/kindeditor/jsp/file_manager_json.jsp',

                       allowFileManager : true,

                       afterCreate : function(id) {

                               KE.event.ctrl(document, 13, function() {

                                      KE.util.setData(id);

                                      document.forms['example'].submit();

                               });

        上面的 imageUploadJson 本来用的是它的 upload_json.jsp ，不过因为我的是SSH项目，所以对这个jsp 有些改动。现在把upload_json2.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.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.*"%>

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

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

//定义允许上传的文件扩展名
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 sdf = new SimpleDateFormat("yyyyMMdd");
String ymd = sdf.format(new Date());
savePath += ymd + "/";
saveUrl += ymd + "/";
File dirFile = new File(savePath);
if (!dirFile.exists()) {
	dirFile.mkdirs();
}



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



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();
   }
%>

 六、插入的图片用上面的jsp上传，再写个Action把你在编辑器里输入的文本保存到数据库中去吧。这个就不用多说了，很简单的

 

七、总结：

这样做肯定不好，上传图片的功能应该也放到 Action 中，这样才是SSH项目嘛。在下一篇文章再介绍