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文件中。包含语言文件。

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

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

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,将其中代码替换为:

<%@ 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,代码如下:

<!--  在excludes元素下指定的页面将不会由SiteMesh来装饰 -->
	<excludes>
		<pattern>/editor4/*</pattern>
		<pattern>/editor4/*.*</pattern>	
	</excludes>
我的编辑器是放在editor4目录下

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值