使用步骤：
1.把kindeditor工具包文件放在WebRoot下的一个文件夹中，假设这个工具包直接放在WebRoot下。
2.在jsp页面中引入头
<script src="${pageContext.request.contextPath}/bootstrap3/js/jquery-1.11.2.min.js"></script>
<link href="${pageContext.request.contextPath}/bootstrap3/js/kindeditor-4.1.10/themes/default/default.css" type="text/css" rel="stylesheet">
<script type="text/javascript" charset="utf-8" src="${pageContext.request.contextPath}/bootstrap3/js/kindeditor-4.1.10/kindeditor-all-min.js"></script>
<script type="text/javascript" charset="utf-8" src="${pageContext.request.contextPath}/bootstrap3/js/kindeditor-4.1.10/kindeditor.js"></script>
<script type="text/javascript" charset="utf-8" src="${pageContext.request.contextPath}/bootstrap3/js/kindeditor-4.1.10/lang/zh_CN.js"></script>
3.在jsp页面用textarea使用
<textarea style="width:800px;height:300px;visibility:hidden;" name="content" class="dd"></textarea>4.在jsp页面加入js控制
<script type="text/javascript">
var KE;
var TT = TAOTAO = {
// 编辑器参数
kingEditorParams : {
resizeType : 1,
allowImageUpload : true,
allowFileManager : true,
uploadJson : '<%=basePath%>bootstrap3/js/kindeditor-4.1.10/upload_json.jsp',
fileManagerJson : '<%=basePath%>bootstrap3/js/kindeditor-4.1.10/file_manager_json.jsp',
afterUpload : function(url, data, name){
this.sync();
//对上传的图片宽度的控制
if(name=="image" || name=="multiimage"){ //单个和批量上传图片时
var img = new Image(); img.src = url;
img.onload = function(){ //图片必须加载完成才能获取尺寸
if(img.width>600) KE.html(KE.html().replace('<img src="' + url + '"','<img src="' + url + '" width="600"'))
}
}
},
afterBlur : function(){this.sync();},
items : ['source', '|', 'undo', 'redo', '|', 'preview', 'template', 'cut', 'copy', 'paste',
'plainpaste', 'wordpaste', '|', 'justifyleft', 'justifycenter', 'justifyright',
'justifyfull', 'insertorderedlist', 'insertunorderedlist', 'indent', 'outdent', 'subscript',
'superscript', 'clearhtml', 'quickformat', 'selectall', '|', 'fullscreen', '/',
'formatblock', 'fontname', 'fontsize', '|', 'forecolor', 'hilitecolor', 'bold',
'italic', 'underline', 'strikethrough', 'lineheight', 'removeformat', '|', 'image','multiimage',
'flash', 'media', 'insertfile', 'table', 'hr', 'emoticons', 'baidumap', 'pagebreak',
'anchor', 'link', 'unlink']
},
createEditor : function(select){
KE = KindEditor.create(select, TT.kingEditorParams);
return KE;
}
}
var itemAddEditor ;
//页面初始化完毕后执行此方法
$(function(){
//创建富文本编辑器
itemAddEditor = TAOTAO.createEditor("#itemAddForm [name=content]",TT.kingEditorParams);
});
//提交表单
function submitForm(){
//编辑器中数据同步描述进textarea
itemAddEditor.sync();
//ajax的post方式提交表单
//提交过去的是json数据，返回回来的数据是json解析的
//$("#itemAddForm").serialize()将表单序列号为key-value形式的字符串
$.post("blogsave.action",$("#itemAddForm").serialize(), function(data){
alert(data);
},"json");
}
</script>
需要注意的点：
（1）图片上传可以使用kindeditor工具包中的jsp文件，也可以使用action，这里使用的是工具包提供的jsp文件 ，使用的时候需要修改上传图片保存的路径。
（2）控制上传的图片宽度
（3）这里的表单提交使用的是ajax异步提交
5.图片上传使用工具包提供的jsp文件
Upload_json.jsp：（修改保存的路径就可以），假设存储图片的位置是webRoot下的blogupload文件夹：
<%@ 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="org.json.simple.*" %>
<%
/**
* KindEditor JSP
*
* 本JSP程序是演示程序，建议不要直接在实际项目中使用。
* 如果您确定直接使用本程序，使用之前请仔细确认相关安全设置。
*
*/
//文件保存目录路径
String savePath = request.getRealPath("/") + "blogupload/";
//文件保存目录URL
String saveUrl = request.getContextPath() + "/blogupload/";
//定义允许上传的文件扩展名
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 = 1000000;
response.setContentType("text/html; charset=UTF-8");
if(!ServletFileUpload.isMultipartContent(request)){
out.println(getError("请选择文件。"));
return;
}
//检查目录
File uploadDir = new File(savePath);
if(!uploadDir.isDirectory()){
out.println(getError("上传目录不存在。"));
return;
}
//检查目录写权限
if(!uploadDir.canWrite()){
out.println(getError("上传目录没有写权限。"));
return;
}
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();
}
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();
}
FileItemFactory factory = new DiskFileItemFactory();
ServletFileUpload upload = new ServletFileUpload(factory);
upload.setHeaderEncoding("UTF-8");
List items = upload.parseRequest(request);
Iterator itr = items.iterator();
while (itr.hasNext()) {
FileItem item = (FileItem) itr.next();
String fileName = item.getName();
long fileSize = item.getSize();
if (!item.isFormField()) {
//检查文件大小
if(item.getSize() > maxSize){
out.println(getError("上传文件大小超过限制。"));
return;
}
//检查扩展名
String fileExt = fileName.substring(fileName.lastIndexOf(".") + 1).toLowerCase();
if(!Arrays.<String>asList(extMap.get(dirName).split(",")).contains(fileExt)){
out.println(getError("上传文件扩展名是不允许的扩展名。\n只允许" + extMap.get(dirName) + "格式。"));
return;
}
SimpleDateFormat df = new SimpleDateFormat("yyyyMMddHHmmss");
String newFileName = df.format(new Date()) + "_" + new Random().nextInt(1000) + "." + fileExt;
try{
File uploadedFile = new File(savePath, newFileName);
item.write(uploadedFile);
}catch(Exception e){
out.println(getError("上传文件失败。"));
return;
}
JSONObject obj = new JSONObject();
obj.put("error", 0);
obj.put("url", saveUrl + newFileName);
out.println(obj.toJSONString());
System.out.println("url:"+saveUrl + newFileName);
System.out.println("path:"+savePath + newFileName);
}
}
%>
<%!
private String getError(String message) {
JSONObject obj = new JSONObject();
obj.put("error", 1);
obj.put("message", message);
return obj.toJSONString();
}
%>
file_manager_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.json.simple.*" %>
<%
/**
* KindEditor JSP
*
* 本JSP程序是演示程序，建议不要直接在实际项目中使用。
* 如果您确定直接使用本程序，使用之前请仔细确认相关安全设置。
*
*/
//根目录路径，可以指定绝对路径，比如 /var/www/attached/
String rootPath = request.getRealPath("/") + "blogupload/";
//根目录URL，可以指定绝对路径，比如 http://www.yoursite.com/attached/
String rootUrl = request.getContextPath() + "/blogupload/";
//图片扩展名
String[] fileTypes = new String[]{"gif", "jpg", "jpeg", "png", "bmp"};
String dirName = request.getParameter("dir");
if (dirName != null) {
if(!Arrays.<String>asList(new String[]{"image", "flash", "media", "file"}).contains(dirName)){
out.println("Invalid Directory name.");
return;
}
rootPath += dirName + "/";
rootUrl += dirName + "/";
File saveDirFile = new File(rootPath);
if (!saveDirFile.exists()) {
saveDirFile.mkdirs();
}
}
//根据path参数，设置各路径和URL
String path = request.getParameter("path") != null ? request.getParameter("path") : "";
String currentPath = rootPath + path;
String currentUrl = rootUrl + path;
String currentDirPath = path;
String moveupDirPath = "";
if (!"".equals(path)) {
String str = currentDirPath.substring(0, currentDirPath.length() - 1);
moveupDirPath = str.lastIndexOf("/") >= 0 ? str.substring(0, str.lastIndexOf("/") + 1) : "";
}
//排序形式，name or size or type
String order = request.getParameter("order") != null ? request.getParameter("order").toLowerCase() : "name";
//不允许使用..移动到上一级目录
if (path.indexOf("..") >= 0) {
out.println("Access is not allowed.");
return;
}
//最后一个字符不是/
if (!"".equals(path) && !path.endsWith("/")) {
out.println("Parameter is not valid.");
return;
}
//目录不存在或不是目录
File currentPathFile = new File(currentPath);
if(!currentPathFile.isDirectory()){
out.println("Directory does not exist.");
return;
}
//遍历目录取的文件信息
List<Hashtable> fileList = new ArrayList<Hashtable>();
if(currentPathFile.listFiles() != null) {
for (File file : currentPathFile.listFiles()) {
Hashtable<String, Object> hash = new Hashtable<String, Object>();
String fileName = file.getName();
if(file.isDirectory()) {
hash.put("is_dir", true);
hash.put("has_file", (file.listFiles() != null));
hash.put("filesize", 0L);
hash.put("is_photo", false);
hash.put("filetype", "");
} else if(file.isFile()){
String fileExt = fileName.substring(fileName.lastIndexOf(".") + 1).toLowerCase();
hash.put("is_dir", false);
hash.put("has_file", false);
hash.put("filesize", file.length());
hash.put("is_photo", Arrays.<String>asList(fileTypes).contains(fileExt));
hash.put("filetype", fileExt);
}
hash.put("filename", fileName);
hash.put("datetime", new SimpleDateFormat("yyyy-MM-dd HH:mm:ss").format(file.lastModified()));
fileList.add(hash);
}
}
if ("size".equals(order)) {
Collections.sort(fileList, new SizeComparator());
} else if ("type".equals(order)) {
Collections.sort(fileList, new TypeComparator());
} else {
Collections.sort(fileList, new NameComparator());
}
JSONObject result = new JSONObject();
result.put("moveup_dir_path", moveupDirPath);
result.put("current_dir_path", currentDirPath);
result.put("current_url", currentUrl);
result.put("total_count", fileList.size());
result.put("file_list", fileList);
response.setContentType("application/json; charset=UTF-8");
out.println(result.toJSONString());
%>
<%!
public class NameComparator implements Comparator {
public int compare(Object a, Object b) {
Hashtable hashA = (Hashtable)a;
Hashtable hashB = (Hashtable)b;
if (((Boolean)hashA.get("is_dir")) && !((Boolean)hashB.get("is_dir"))) {
return -1;
} else if (!((Boolean)hashA.get("is_dir")) && ((Boolean)hashB.get("is_dir"))) {
return 1;
} else {
return ((String)hashA.get("filename")).compareTo((String)hashB.get("filename"));
}
}
}
public class SizeComparator implements Comparator {
public int compare(Object a, Object b) {
Hashtable hashA = (Hashtable)a;
Hashtable hashB = (Hashtable)b;
if (((Boolean)hashA.get("is_dir")) && !((Boolean)hashB.get("is_dir"))) {
return -1;
} else if (!((Boolean)hashA.get("is_dir")) && ((Boolean)hashB.get("is_dir"))) {
return 1;
} else {
if (((Long)hashA.get("filesize")) > ((Long)hashB.get("filesize"))) {
return 1;
} else if (((Long)hashA.get("filesize")) < ((Long)hashB.get("filesize"))) {
return -1;
} else {
return 0;
}
}
}
}
public class TypeComparator implements Comparator {
public int compare(Object a, Object b) {
Hashtable hashA = (Hashtable)a;
Hashtable hashB = (Hashtable)b;
if (((Boolean)hashA.get("is_dir")) && !((Boolean)hashB.get("is_dir"))) {
return -1;
} else if (!((Boolean)hashA.get("is_dir")) && ((Boolean)hashB.get("is_dir"))) {
return 1;
} else {
return ((String)hashA.get("filetype")).compareTo((String)hashB.get("filetype"));
}
}
}
%>
6.Controller：这样kindeditor图片上传的就可以完成了，然后内容上传就和普通的参数上传一样了，比如写博客上传。textarea的name是BlogQuery中的一个字段。
//写博客提交的数据
@RequestMapping(value="/blogsave.action")
@ResponseBody
public String writeBlog(BlogQuery blog,HttpServletRequest request,HttpServletResponse response){
String s = "";
tbblogservice.writeBlog(blog, request);
s = "添加成功";==
Gson gson = new Gson();
String json = gson.toJson(s);
response.setContentType("text/json;charset=UTF-8");
return json;
} 编辑器中的图片除了可以上传到kindeditor工具包提供的jsp以外，还可以提交到action中，下面介绍图片上传的第二种方式。
区别是：
（1）在js 的控制代码中：
var TT = TAOTAO = {
// 编辑器参数
kingEditorParams : {
resizeType : 1,
allowImageUpload : true,
allowFileManager : true,
uploadJson : 'quesupload_json.action',
fileManagerJson : 'quesfile_manager_json.action',
afterUpload : function(url, data, name){
（2）Controller中要有图片上传的action
//关于写问题，图片上传的
@RequestMapping(value="/quesupload_json.action")
public void upload(HttpServletRequest request,HttpServletResponse response){
try {
PrintWriter out = response.getWriter();
//文件保存目录路径
String savePath = request.getRealPath("/") + "quesupload/";
//文件保存目录URL
String saveUrl = request.getContextPath() + "/quesupload/";
//定义允许上传的文件扩展名
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 = 1000000;
response.setContentType("text/html; charset=UTF-8");
if(!ServletFileUpload.isMultipartContent(request)){
out.println(getError("请选择文件。"));
return;
}
//检查目录
File uploadDir = new File(savePath);
if(!uploadDir.isDirectory()){
out.println(getError("上传目录不存在。"));
return;
}
//检查目录写权限
if(!uploadDir.canWrite()){
out.println(getError("上传目录没有写权限。"));
return;
}
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();
}
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();
}
//创建一个DiskFileItemFactory工厂
FileItemFactory factory = new DiskFileItemFactory();
//创建一个文件上传解析器
ServletFileUpload upload = new ServletFileUpload(factory);
//设置编码
upload.setHeaderEncoding("UTF-8");
List items = upload.parseRequest(request);
MultipartHttpServletRequest multipartRequest = (MultipartHttpServletRequest) request;
Iterator item = multipartRequest.getFileNames();
while (item.hasNext()) {
String fileName = (String) item.next();
MultipartFile file = multipartRequest.getFile(fileName);
// 检查文件大小
if (file.getSize() > maxSize) {
out.println(getError("上传文件大小超过限制。"));
return;
}
// 检查扩展名
String fileExt = file.getOriginalFilename().substring(file.getOriginalFilename().lastIndexOf(".") + 1).toLowerCase();
if (!Arrays. asList(extMap.get(dirName).split(",")).contains(fileExt)) {
out.println(getError("上传文件扩展名是不允许的扩展名。\n只允许" + extMap.get(dirName) + "格式。"));
return;
}
SimpleDateFormat df = new SimpleDateFormat("yyyyMMddHHmmss");
String newFileName = df.format(new Date()) + "_" + new Random().nextInt(1000) + "." + fileExt;
InputStream in = file.getInputStream();
FileOutputStream out2 = null;
try {
File uploadedFile = new File(savePath, newFileName);
out2 = new FileOutputStream(uploadedFile);
byte[] b = new byte[1024];
int num = 0;
while((num = in.read(b)) != -1){
out2.write(b, 0, num);
out2.flush();
}
} catch (Exception e) {
e.printStackTrace();
}finally{
if(in != null){
in.close();
}
if(out2 != null){
out2.close();
}
}
JSONObject obj = new JSONObject();
obj.put("error", 0);
obj.put("url", saveUrl + newFileName);
out.println(obj.toJSONString());
}
} catch (Exception e) {
e.printStackTrace();
}
}
//上传报错的提示方法
private String getError(String message) {
JSONObject obj = new JSONObject();
obj.put("error", 1);
obj.put("message", message);
return obj.toJSONString();
}
@RequestMapping(value="/quesfile_manager_json.action")
public void fileupload(HttpServletRequest request,HttpServletResponse response){
PrintWriter out = null;
try {
out = response.getWriter();
} catch (IOException e) {
e.printStackTrace();
}
//根目录路径
String rootPath = request.getRealPath("/") + "quesupload/";
//根目录URL，可以指定绝对路径，比如 http://www.yoursite.com/attached/
String rootUrl = request.getContextPath() + "/quesupload/";
//图片扩展名
String[] fileTypes = new String[]{"gif", "jpg", "jpeg", "png", "bmp"};
//要打开的文件夹
String dirName = request.getParameter("dir");
if (dirName != null) {
if(!Arrays.<String>asList(new String[]{"image", "flash", "media", "file"}).contains(dirName)){
out.println("无效的目录");
return;
}
rootPath += dirName + "/";
rootUrl += dirName + "/";
File saveDirFile = new File(rootPath);
if (!saveDirFile.exists()) {
saveDirFile.mkdirs();
}
}
//根据path参数，设置各路径和URL
String path = request.getParameter("path") != null ? request.getParameter("path") : "";
String currentPath = rootPath + path;
String currentUrl = rootUrl + path;
String currentDirPath = path;
String moveupDirPath = "";
if (!"".equals(path)) {
String str = currentDirPath.substring(0, currentDirPath.length() - 1);
moveupDirPath = str.lastIndexOf("/") >= 0 ? str.substring(0, str.lastIndexOf("/") + 1) : "";
}
//排序形式，name or size or type
String order = request.getParameter("order") != null ? request.getParameter("order").toLowerCase() : "name";
//不允许使用..移动到上一级目录
if (path.indexOf("..") >= 0) {
out.println("Access is not allowed.");
return;
}
//最后一个字符不是/
if (!"".equals(path) && !path.endsWith("/")) {
out.println("Parameter is not valid.");
return;
}
//目录不存在或不是目录
File currentPathFile = new File(currentPath);
if(!currentPathFile.isDirectory()){
out.println("Directory does not exist.");
return;
}
//遍历目录取的文件信息
List<Hashtable> fileList = new ArrayList<Hashtable>();
if(currentPathFile.listFiles() != null) {
for (File file : currentPathFile.listFiles()) {
Hashtable<String, Object> hash = new Hashtable<String, Object>();
String fileName = file.getName();
if(file.isDirectory()) {
hash.put("is_dir", true);
hash.put("has_file", (file.listFiles() != null));
hash.put("filesize", 0L);
hash.put("is_photo", false);
hash.put("filetype", "");
} else if(file.isFile()){
String fileExt = fileName.substring(fileName.lastIndexOf(".") + 1).toLowerCase();
hash.put("is_dir", false);
hash.put("has_file", false);
hash.put("filesize", file.length());
hash.put("is_photo", Arrays.<String>asList(fileTypes).contains(fileExt));
hash.put("filetype", fileExt);
}
hash.put("filename", fileName);
hash.put("datetime", new SimpleDateFormat("yyyy-MM-dd HH:mm:ss").format(file.lastModified()));
fileList.add(hash);
}
}
if ("size".equals(order)) {
Collections.sort(fileList, new SizeComparator());
} else if ("type".equals(order)) {
Collections.sort(fileList, new TypeComparator());
} else {
Collections.sort(fileList, new NameComparator());
}
JSONObject result = new JSONObject();
result.put("moveup_dir_path", moveupDirPath);
result.put("current_dir_path", currentDirPath);
result.put("current_url", currentUrl);
result.put("total_count", fileList.size());
result.put("file_list", fileList);
response.setContentType("application/json; charset=UTF-8");
out.println(result.toJSONString());
}
class NameComparator implements Comparator {
public int compare(Object a, Object b) {
Hashtable hashA = (Hashtable)a;
Hashtable hashB = (Hashtable)b;
if (((Boolean)hashA.get("is_dir")) && !((Boolean)hashB.get("is_dir"))) {
return -1;
} else if (!((Boolean)hashA.get("is_dir")) && ((Boolean)hashB.get("is_dir"))) {
return 1;
} else {
return ((String)hashA.get("filename")).compareTo((String)hashB.get("filename"));
}
}
}
class SizeComparator implements Comparator {
public int compare(Object a, Object b) {
Hashtable hashA = (Hashtable)a;
Hashtable hashB = (Hashtable)b;
if (((Boolean)hashA.get("is_dir")) && !((Boolean)hashB.get("is_dir"))) {
return -1;
} else if (!((Boolean)hashA.get("is_dir")) && ((Boolean)hashB.get("is_dir"))) {
return 1;
} else {
if (((Long)hashA.get("filesize")) > ((Long)hashB.get("filesize"))) {
return 1;
} else if (((Long)hashA.get("filesize")) < ((Long)hashB.get("filesize"))) {
return -1;
} else {
return 0;
}
}
}
}
class TypeComparator implements Comparator {
public int compare(Object a, Object b) {
Hashtable hashA = (Hashtable)a;
Hashtable hashB = (Hashtable)b;
if (((Boolean)hashA.get("is_dir")) && !((Boolean)hashB.get("is_dir"))) {
return -1;
} else if (!((Boolean)hashA.get("is_dir")) && ((Boolean)hashB.get("is_dir"))) {
return 1;
} else {
return ((String)hashA.get("filetype")).compareTo((String)hashB.get("filetype"));
}
}
}
博客添加的Controller：
//写博客提交的数据
@RequestMapping(value="/blogsave.action")
@ResponseBody
public String writeBlog(BlogQuery blog,HttpServletRequest request,HttpServletResponse response){
String s = "";
tbblogservice.writeBlog(blog, request);
s = "添加成功";
Gson gson = new Gson();
String json = gson.toJson(s);
response.setContentType("text/json;charset=UTF-8");
return json;
}
扫一扫
2271
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
