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/";//文件保存目录URLString 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项目嘛。在下一篇文章再介绍