1、 kindeditor 灌水 (下载地址,demo)
经过两天的折磨,又源代码,又官网学习,又网络搜索的,终于成功的嵌入KindEditor了。
KindEditor确实是个不错的富文本编辑器,纯JS,比起JQuery写的,夸浏览器更佳。
所以在多种富文本编辑器中,死死认定了KE就是我要的~~
网站里有相应的DEMO以及解说
KE除了图片上传(个人浅见),其他功能并不会涉及到框架问题。
2、图片上传改动:
将KE嵌入项目之后,找到进入plugins -- image ,打开image.html
A、找到 var imageUploadJson = (typeof KE.g[id].imageUploadJson == 'undefined') ? '../../php/upload_json.php' : KE.g[id].imageUploadJson; KE默认是用PHP来处理图片上传的,所以改成自己的(如:upload_json.jsp)。
路径要注意咯~~
之后就开始写(upload_json.jsp)自己的处理过程了。
因为KE图片上传功能是通过Ajax实现的,所以,对JSONObject这些jar包是免不了的。下载的KE包里有json_simple-1.1.jar。省了功夫去找。
B、只要对下载下来的JSP(版) 上传文件demo文件里的 upload_json.jsp 进行文件存储路径的修改就可以轻易搞定,完全不需要自己去动工。
不过如果是用SSH框架,而Struts2 web.xml 配置的Struts过滤器如下的话:
也就是对所有的访问请求进行过滤,那么通常会在使用KE上传本地图片时会报 “服务器发生故障”之类的错误。
Struts2 对 所有 enctype="multipart/form-data"(上传文件用的表单数据类型) 的表单的request进行了封装。打包成MultiPartRequestWrapper 。这就导致拿不到原本的request了。
有个简单的方法是将url-pattern 标签里的内容改成其他的,如:*.action 。在路径以及其他的小问题都有注意修改的情况下,这样就可以上传图片成功了,并且可以在textarea里看到图片。
不过,又会有其他的问题产生,比如,你的网页经常性用到 struts-tag 标签,那么可能就会报 404 或者 500 的错误,因为普通jsp网页在没有调用action时,使用struts标签会访问不到元素。
又一个纠结(悲剧,项目做到后面才去玩KE,所以,还是不改动url了)~~ 自己写action处理上传吧,也不怎么奏效。
查了查资料,其实,这是struts带给我们的方便。在不改动<url-pattern>/*</ url-pattern>的情况下重写upload_json.jsp。
3、代码:
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@page import="org.apache.struts2.dispatcher.multipart.MultiPartRequestWrapper"%>
<%@page import="java.util.concurrent.locks.*" %>
<%@page import="java.io.*" %>
<%@ page import="org.json.simple.*" %>
<%
//Struts2 请求 包装过滤器
MultiPartRequestWrapper wrapper = (MultiPartRequestWrapper)request;
//获得上传的文件名
String fileName = wrapper.getFileNames("imgFile")[0];
//获得未见过滤器
File file = wrapper.getFiles("imgFile")[0];
//----------重新构建上传文件名---------
final Lock lock = new ReentrantLock();
String newName = null;
lock.lock();
try{
//加锁为防止文件名重复
newName = System.currentTimeMillis()
+fileName.substring(fileName.lastIndexOf("."),
fileName.length());
}finally{
lock.unlock();
}
//------锁结束---------
//获取文件输出流
FileOutputStream fos = new FileOutputStream(request.getSession()
.getServletContext().getRealPath("/")
+"team/" + newName);
//设置 KE 中的图片文件地址
String newFileName = request.getScheme() + "://"
+ request.getServerName() + ":" + request.getServerPort()
+ request.getContextPath() + "/team/" + newName;
byte[] buffer = new byte[1024];
//获取内存中当前文件输入流
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", newFileName);
out.println(obj.toJSONString());
%>
OK,成功了~~ 总算搞定了~~