Struts2下使用KindEditor4.1.3

因为项目需要使用一个能够上传各类附件的Editor，支持国货，选择了KindEditor。最新版本是4.1.3，可以在这里下载：

KindEditor4.1.3

下载完毕之后放入开发目录下，JavaWeb的项目可以删除下载文件目录下的其它语言示例，只留下jsp即可。

在文件目录下有一个KindEditor-all.js和KindEditor.js，前者包含了所有的插件，不必再一一引入，我选择使用KindEditor-all.js。

KindEditor-all.js默认是php环境，其上传部分都默认为upload_json.php，我们全文替换为jsp目录下的upload_json.jsp。同样也要替换掉file_manager_json.php为file_manager_json.jsp。

之后将替换好的js文件引入到jsp文件中。包含语言文件。

[javascript]  view plain copy

1. <script charset="utf-8" src="editor/kindeditor-all.js"></script>  
2. <script charset="utf-8" src="editor/lang/zh_CN.js"></script>  

仿照官方示例，对一个Id为article_content的Div进行初始化，代码如下：

[javascript] view plaincopy
var editor;  
KindEditor.ready(function(K) {  
    editor = K.create('textarea[id="article_content"]', {  
        allowFileManager : true,  
        allowImageUpload : true,  
        items : [  
                'source', '|', 'undo', 'redo', '|', 'preview', 'print', 'code', 'cut', 'copy', 'paste',  
                 'wordpaste', '|', 'justifyleft', 'justifycenter', 'justifyright',  
                'justifyfull', 'insertorderedlist', 'insertunorderedlist', 'indent', 'outdent', 'subscript',  
                'superscript', 'clearhtml', 'quickformat',  
                'formatblock', 'fontname', 'fontsize', '|', 'forecolor', 'hilitecolor', 'bold',  
                'italic', 'underline', 'strikethrough', 'lineheight', 'removeformat', '|', 'image', 'multiimage',  
                'flash', 'media', 'insertfile', 'table', 'hr', 'emoticons', 'baidumap', 'pagebreak',  
                'anchor', 'link', 'unlink', 'selectall','fullscreen']  
                  
    });  
});  

刷新页面可以看到一个编辑框已经显示。

打开jsp/upload_json.jsp，将其中代码替换为：

[java] view plaincopy
<%@ 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("/") + "attached/";  
        //文件保存目录URL  
        String saveUrl = request.getContextPath() + "/attached/";  
        //定义允许上传的文件扩展名  
        HashMap<String, String> extMap = new HashMap<String, String>();  
        extMap.put("image", "gif,jpg,jpeg,png,bmp");  
        extMap.put("flash", "swf,flv");  
        extMap.put("media", "swf,flv,mp3,wav,wma,wmv,mid,avi,mpg,asf,rm,rmvb");  
        extMap.put("file", "doc,docx,xls,xlsx,ppt,htm,html,txt,zip,rar,gz,bz2");  
        //允许最大上传文件大小  
        long maxSize = 2048000;  
        //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();  
        //获得文件上传的类型  
        String dirName = request.getParameter("dir");  
        if (dirName == null) {  
                dirName = "image";  
        }  
        if(!extMap.containsKey(dirName)){  
                out.println(getError("目录名不正确。"));  
                return;  
        }  
        //创建文件夹  
        savePath += dirName + "/";  
        saveUrl += dirName + "/";  
        File saveDirFile = new File(savePath);  
        if (!saveDirFile.exists()) {  
                saveDirFile.mkdirs();  
        }  
        //检查扩展名  
        if (!Arrays.<String> asList(extMap.get(dirName).split(",")).contains(fileExt)) {  
                out.println(getError("上传文件扩展名是不允许的扩展名。\n只允许" + extMap.get(dirName) + "格式。"));  
                return;  
        }  
        //检查文件大小  
        if (file.length() > maxSize) {  
                out.println(getError("上传文件大小超过限制，上传的文件不能超过2M。"));  
                return;  
        }   
        //检查目录  
    SimpleDateFormat sdf = new SimpleDateFormat("yyyyMMdd");  
    String dir = sdf.format(new Date());  
        File uploadDir = new File(savePath + dir);  
        uploadDir.mkdirs();  
        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 + dir + "/" + newImgName;  
        byte[] buffer = new byte[1024];  
        //获取文件输出流  
        FileOutputStream fos = new FileOutputStream(savePath + dir + "/" + 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 + dir + "/" + 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();  
}  
%>  

这个代码修复了目录不存在时报错的问题，在目录不存在时进行创建。

这样就ok了，上传的视频，flash，图片和文件会分类存放在attach目录下。

----------------------- 如果使用了sitemesh-----------------------

如果使用了sitemesh对jsp进行了装饰(Decorate)，需要将editor目录进行exclude，代码如下：

[html]  view plain copy

1. <span style="font-size:14px;"><!--  在excludes元素下指定的页面将不会由SiteMesh来装饰 -->  
2.     <excludes>  
3.         <pattern>/editor4/*</pattern>  
4.         <pattern>/editor4/*.*</pattern>   
5.     </excludes></span>  

我的编辑器是放在editor4目录下