一、到官网去下载。我下的是kindeditor-3.5.5-zh_CN.zip,当前比较稳定的版本。
二、解压之后,把它拷到你的项目的 WebRoot下。当然不是所有东西都有用,我拷的是下面几个:
三、在需要显示编辑器的位置添加TEXTAREA输入框。
id在当前页面必须是唯一的值,还有,在有些浏览器上不设宽度和高度可能显示有问题,所以最好设一下宽度和高度。宽度和高度可用inline样式设置,也可用编辑器初始化参数设置。
四、引入kindeditor的js文件,<script charset="utf-8" src="/EbusinessOfFxoh/kindeditor/kindeditor.js"></script>
<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();
});
<%@ 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项目嘛。在下一篇文章再介绍