在web開發中，經常會使用到編輯器進行圖文內容的編輯，個人推薦使用xheditor，如你所見，CSDN也正是使用的xheditor。
官方網站爲：http://xheditor.com/
xheditor-1.1.7 編輯器插件下載地址
http://download.csdn.net/detail/huahuagongzi9999/7130273一，首先創建一個web工程：test-xheditor；具體目錄結構如下：
二，按上圖，導入相應的xheditor文件、lib包【commons-fileupload-1.2.1.jar，commons-io-1.3.2.jar，
commons-lang-2.4.jar，servlet-api.jar】、index.jsp。
三，系統常量類：SystemConstants.class，
/**
*
*/
package com.xheditor.contants;
/**
* @author hu.shiguo
* @time 2014-3-19下午11:57:14
* @description 系統常量
* @version
*/
public class SystemConstants {
public static String WEB_ROOT = null;
}
四，初始化配置類：SystemListener.class，
/**
*
*/
package com.xheditor.listener;
import javax.servlet.ServletContextEvent;
import javax.servlet.ServletContextListener;
import com.xheditor.contants.SystemConstants;
/**
* @author hu.shiguo
* @time 2014-3-19下午11:50:36
* @description 系統加載監聽器，可以在web容器啓動的時候加載一些配置到內存中
* @version
*/
public class SystemListener implements ServletContextListener {
/* (non-Javadoc)
* @see javax.servlet.ServletContextListener#contextDestroyed(javax.servlet.ServletContextEvent)
*/
@Override
public void contextDestroyed(ServletContextEvent event) {
}
/* (non-Javadoc)
* @see javax.servlet.ServletContextListener#contextInitialized(javax.servlet.ServletContextEvent)
*/
@Override
public void contextInitialized(ServletContextEvent event) {
String webRoot = event.getServletContext().getRealPath("/");
System.out.println(webRoot);
SystemConstants.WEB_ROOT = webRoot;
}
}
五，上傳文件類：UploadFileServlet.class，
package com.sportevents.servlet;
import java.io.File;
import java.io.IOException;
import java.io.PrintWriter;
import java.io.Serializable;
import java.text.SimpleDateFormat;
import java.util.Date;
import java.util.HashMap;
import java.util.Iterator;
import java.util.List;
import java.util.Map;
import java.util.UUID;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import org.apache.commons.fileupload.DiskFileUpload;
import org.apache.commons.fileupload.FileItem;
import org.apache.commons.lang.StringUtils;
import com.sportevents.contants.SystemConstants;
@SuppressWarnings({ "serial", "deprecation" })
public class UploadFileServlet extends HttpServlet {
private static String baseFileDir = File.separator + "uploadFile" + File.separator;//上傳文件存儲目錄
private static String baseURLDir = "/uploadFile/";//上傳文件目錄URL
private static String fileExt = "jpg,jpeg,bmp,gif,png";
private static Long maxSize = 0l;
// 0:不建目錄 1:按天存入目錄 2:按月存入目錄 3:按擴展名存目錄 建議使用按天存
private static String dirType = "1";
/**
* 文件上傳初始化工作
*/
public void init() throws ServletException {
/*獲取文件上傳存儲的相當路徑*/
if (!StringUtils.isBlank(this.getInitParameter("baseDir"))){
baseFileDir = this.getInitParameter("baseDir");
}
String realBaseDir = this.getServletConfig().getServletContext().getRealPath(baseFileDir);
File baseFile = new File(realBaseDir);
if (!baseFile.exists()) {
baseFile.mkdir();
}
/*獲取文件類型參數*/
fileExt = this.getInitParameter("fileExt");
if (StringUtils.isBlank(fileExt)) fileExt = "jpg,jpeg,gif,bmp,png";
/*獲取文件大小參數*/
String maxSize_str = this.getInitParameter("maxSize");
if (StringUtils.isNotBlank(maxSize_str)) maxSize = new Long(maxSize_str);
/*獲取文件目錄類型參數*/
dirType = this.getInitParameter("dirType");
if (StringUtils.isBlank(dirType))
dirType = "1";
if (",0,1,2,3,".indexOf("," + dirType + ",") < 0)
dirType = "1";
}
/**
* 上傳文件數據處理過程
*/
@SuppressWarnings({"unchecked" })
public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
response.setContentType("text/html; charset=UTF-8");
response.setHeader("Cache-Control", "no-cache");
String err = "";
String newFileName = "";
DiskFileUpload upload = new DiskFileUpload();
try {
List<FileItem> items = upload.parseRequest(request);
Map<String, Serializable> fields = new HashMap<String, Serializable>();
Iterator<FileItem> iter = items.iterator();
while (iter.hasNext()) {
FileItem item = (FileItem) iter.next();
if (item.isFormField())
fields.put(item.getFieldName(), item.getString());
else
fields.put(item.getFieldName(), item);
}
/*獲取表單的上傳文件*/
FileItem uploadFile = (FileItem)fields.get("filedata");
/*獲取文件上傳路徑名稱*/
String fileNameLong = uploadFile.getName();
System.out.println("fileNameLong:" + fileNameLong);
/*獲取文件擴展名*/
/*索引加1的效果是隻取xxx.jpg的jpg*/
String extensionName = fileNameLong.substring(fileNameLong.lastIndexOf(".") + 1);
System.out.println("extensionName:" + extensionName);
/*檢查文件類型*/
if (("," + fileExt.toLowerCase() + ",").indexOf("," + extensionName.toLowerCase() + ",") < 0){
printInfo(response, "不允許上傳此類型的文件", "");
return;
}
/*文件是否爲空*/
if (uploadFile.getSize() == 0){
printInfo(response, "上傳文件不能爲空", "");
return;
}
/*檢查文件大小*/
if (maxSize > 0 && uploadFile.getSize() > maxSize){
printInfo(response, "上傳文件的大小超出限制", "");
return;
}
//0:不建目錄, 1:按天存入目錄, 2:按月存入目錄, 3:按擴展名存目錄.建議使用按天存.
String fileFolder = "";
if (dirType.equalsIgnoreCase("1"))
fileFolder = new SimpleDateFormat("yyyyMMdd").format(new Date());;
if (dirType.equalsIgnoreCase("2"))
fileFolder = new SimpleDateFormat("yyyyMM").format(new Date());
if (dirType.equalsIgnoreCase("3"))
fileFolder = extensionName.toLowerCase();
//工程目錄
String projectPath = SystemConstants.WEB_ROOT;
File files = new File(projectPath);
//上傳文件保存目錄
String uploadFilePath = files.getParent()+File.separator + "uploadFile"+File.separator
+fileFolder+File.separator;
//String uploadFilePath =files.getPath()+File.separator + "uploadFile";
/*文件存儲的相對路徑*/
//String saveDirPath = baseFileDir + fileFolder + "/";
//System.out.println("saveDirPath:" + saveDirPath);
/*文件存儲在容器中的絕對路徑*/
//String saveFilePath = this.getServletConfig().getServletContext().getRealPath("") + baseFileDir + fileFolder + "/";
System.out.println("saveFilePath:" + uploadFilePath);
/*構建文件目錄以及目錄文件*/
File fileDir = new File(uploadFilePath);
if (!fileDir.exists()) {fileDir.mkdirs();}
/*重命名文件*/
String filename = UUID.randomUUID().toString();
File savefile = new File(uploadFilePath + filename + "." + extensionName);
/*存儲上傳文件*/
System.out.println(upload == null);
uploadFile.write(savefile);
//String projectBasePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+request.getContextPath();
String projectBasePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort();
newFileName = projectBasePath + baseURLDir + fileFolder + "/" + filename + "." + extensionName;
System.out.println("newFileName:" + newFileName);
} catch (Exception ex) {
System.out.println(ex.getMessage());
newFileName = "";
err = "錯誤: " + ex.getMessage();
}
printInfo(response, err, newFileName);
}
/**
* 使用I/O流輸出 json格式的數據
* @param response
* @param err
* @param newFileName
* @throws IOException
*/
public void printInfo(HttpServletResponse response, String err, String newFileName) throws IOException {
PrintWriter out = response.getWriter();
//String filename = newFileName.substring(newFileName.lastIndexOf("/") + 1);
out.println("{\"err\":\"" + err + "\",\"msg\":\"" + newFileName + "\"}");
out.flush();
out.close();
}
}
六，web.xml,主要配置監聽和上傳文件的servlet
<listener>
<listener-class>com.xheditor.listener.SystemListener</listener-class>
</listener>
<servlet>
<servlet-name>UploadFileServlet</servlet-name>
<servlet-class>com.xheditor.servlet.UploadFileServlet</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>UploadFileServlet</servlet-name>
<url-pattern>/servlet/UploadFileServlet</url-pattern>
</servlet-mapping>七，jsp頁面：
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<c:set var="ctx" value="${pageContext.request.contextPath}" />
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>xheditor</title>
<base href="<%=basePath%>"/>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<link rel="stylesheet" type="text/css" href="css/style.css">
<link rel="stylesheet" type="text/css" href="css/main.css">
<script type="text/javascript" src="${ctx}/xheditor-1.1.7/jquery/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="${ctx}/xheditor-1.1.7/xheditor-1.1.7-zh-cn.min.js"></script>
<script type="text/javascript" src="${ctx}/js/yz.js"></script>
<script type="text/javascript">
$(document).ready(function() {
//初始化xhEditor編輯器插件
$('#xh_editor').xheditor({
tools:'full',
skin:'default',
upMultiple:true,
upImgUrl: "servlet/UploadFileServlet",
upImgExt: "jpg,jpeg,gif,bmp,png",
onUpload:insertUpload,
html5Upload:false
});
//xbhEditor編輯器圖片上傳回調函數
function insertUpload(msg) {
var _msg = msg.toString();
//var _picture_name = _msg.substring(_msg.lastIndexOf("/")+1);
//var _picture_path = Substring(_msg);
//var _str = "<input type='checkbox' name='_pictures' value='"+_picture_path+"' checked='checked' οnclick='return false'/><label>"+_picture_name+"</label><br/>";
//alert("xh_editor==before="+$("#xh_editor").val());
$("#xh_editor").append(_msg);
//$(""+_msg).appendTo($("#clubDesc"));
//alert("xh_editor==end="+$("#xh_editor").val());
}
//處理服務器返回到回調函數的字符串內容,格式是JSON的數據格式.
function Substring(s){
return s.substring(s.substring(0,s.lastIndexOf("/")).lastIndexOf("/"),s.length);
}
//save
$("#save").bind("click",function(){
// var xh_editor = $("#xh_editor").val().replace(/\s/g, "");
//alert("last=="+xh_editor);
document.getElementById("froms").submit();
});
});
</script>
</head>
<body>
<div class="contents">
<form method="POST" name ="froms" id="froms" action="test/add.html" class="dataForm">
<div class="form">
<ul>
<li><label>簡介：</label>
<div class="fields-box">
<em></em><textarea rows="25" cols="160" name="clubDesc" id="xh_editor"
style="border: 1px"></textarea>
</div></li>
<li><label></label>
<div class="fields-box">
<input class="button_blue inputS" type="button" id="save"
value="確定保存">
</div></li>
</div>
</ul>
</div>
</form>
</div>
<!-- <div id="uploadList"></div> -->
</body>
</html>
八，最後效果：
