给客户制作的项目中需要添加富文本，从网上看了一下很多人推荐kindeditor这个编辑器，用了之后也感觉不错，有一些问题的就是上传图片的时候遇到了一些问题，在这里记录一下，也方便以后查看。
首先在官网下载kindeditor压缩包，（我这里用的是kindedito-4.1.7），解压开，把jsp、plugins、skins、kindeditor.js 、kindedditor-min.js放进自己的项目中（我是放在webroot下面新建的文件夹kindeditor下面的），其他的可以不放。
下载的压缩包中有demo我们可以参考一下，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="https://www.doczj.com/doc/2910491011.html,mons.fileupload.*" %>
<%@ page import="https://www.doczj.com/doc/2910491011.html,mons.fileupload.disk.*" %>
<%@ page import="https://www.doczj.com/doc/2910491011.html,mons.fileupload.servlet.*" %>
<%@ page import="org.json.simple.*" %>
<%
//文件保存目录路径
String savePath = pageContext.getServletContext().getRealPath("/") + "attached/";
//文件保存目录URL
String saveUrl = request.getContextPath() + "/attached/";
//定义允许上传的文件扩展名
HashMap
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(https://www.doczj.com/doc/2910491011.html,stIndexOf(".") +
1).toLowerCase();
if(!Arrays.
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());
}
}
%>
<%!
private String getError(String message) {
JSONObject obj = new JSONObject();
obj.put("error", 1);
obj.put("message", message);
return obj.toJSONString();
}
%>
在我们使用kindeditor的页面添加如下代码，其中item是选项卡，这里根据自己的需要添加选项。
KindEditor.ready(function(K) {
window.editor = K.create('#editor_id', {
items : ['source', '|', 'undo', 'redo', '|', 'preview', 'print', 'template', 'code', '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',
'flash', 'media', 'insertfile', 'table', 'hr', 'emoticons', 'baidumap',
'pagebreak',
'anchor', 'link', 'unlink', '|', 'about'],afterChange : function() {
this.sync();
}
}
);
});
然后修改Plugins——>image——>image.js
将其中的
uploadJson = K.undef(self.uploadJson, self.basePath + 'php/upload_json.php'),修改为
uploadJson = K.undef(self.uploadJson, self.basePath + 'jsp/upload_json.jsp'),
` 最后不要忘记在我们tomcat目录下新建一个名为attached的目录来存放我们的图片。之所以取名为attached是因为在upload_json.jsp中默认存储图片的文件夹名为attached。自己的这个方法也是摸索着来，希望能够和大家交流。