xheditor
将jquery-1.4.4.4.min.js
xheditor-1.1.12-zh-cn.min.js
xheditor_emot
xheditor_plugins
xheditor_skin
放到WebContent的xheditor文件夹中。
将jquery-1.4.4.4.min.js和xheditor-1.1.12-zh-cn.min.js导入到页面
如：<script type="text/javascript" src="xheditor/jquery/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="xheditor/xheditor-1.1.12-zh-cn.min.js"></script>
xheditor初始化的js代码：
<script type="text/javascript">
$(document).ready(function(){
$('#elem1').xheditor({
tools:'full',
urlType:'rel',
upBtnText:'上传',
upMultiple:'1',
upImgUrl:'/OnlineExamManagement/servlet/UploadFileServlet',
upImgExt:'jpg,jpeg,gif,png,bmp',
onUpload:insertUpload
});
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='_picture' value='"+_picture_path+"' checked='checked' onclick='return false' /><label>"+_picture_name+"</label</br>";
var _img="<img id='image' src='"+_picture_path+"' />"
$("#elem1").append(_msg);
$("#uploadList").append(_str);
}
function Substring(s){
return s.substring(s.substring(0,s.lastIndexOf("/")).lastIndexOf("/"),s.length);
}
});
</script>
在需要用xheditor的地方：
<form action="" method="post">
<div>
<textarea id="elem1" name="contents" rows="10" style="width: 100%;border: 1px">
</textarea>
</div>
<div id="uploadList"></div>
<input type="submit" value="提交"/>
</form>
<%
String str=request.getParameter("contents");
out.write(str);
%>
[解决办法]
servlet类：
package com.augmentum.xheditor;
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.xwork.StringUtils;
public class UploadFileServlet extends HttpServlet{
private static final long serialVersionUID = 1L;
private static String baseDir = "/ARTICLE_IMG";//upload file directory
private static String fileExt = "jpg,jpeg,bmp,png,gif";
private static Long maxSize = 0l;
//0:不建目录 1.按天存入目录 2:按月存入目录 3:按扩展名存入目录
private static String dirType = "1";
/**
* 文件上传初始化
*/
public void init()throws ServletException{
System.out.println("UploadFileServlet init()!");
//获取web.xml中servlet的培植文件目录参数
baseDir = this.getInitParameter("baseDir");
//获取文件上传存储的相当路径
if(StringUtils.isBlank(baseDir))
baseDir = "/ARTICLE_IMG";
String realBaseDir = this.getServletConfig().getServletContext().getRealPath(baseDir);
File baseFile = new File(realBaseDir);
if(!baseFile.exists()){
baseFile.mkdir();
}
//获取文件类型参数
fileExt = this.getInitParameter("fileExt");
if(StringUtils.isBlank(fileExt))
fileExt = "jpg,jpeg,bmp,png,gif";
//获取文件大小参数
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";
}
/**
* 上传文件数据处理过程
*/
public void doPost(HttpServletRequest request,HttpServletResponse response)throws ServletException,IOException{
System.out.println("UploadFileServlet doPost()!");
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 = 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();
//获取文件扩展名
//索引加1的效果是只取xxx.jpg的jpg
String extenttionName = fileNameLong.substring(fileNameLong.lastIndexOf(".")+1);
//检查文件类型
if((","+fileExt.toLowerCase()+",").indexOf(","+extenttionName.toLowerCase()+",")<0){
print(response,"error file type", "");
return;
}
//文件是否为空
if(uploadFile.getSize()==0){
print(response, "the file can't be empty", "");
return;
}
//检查文件大小
if(maxSize>0&&uploadFile.getSize()>maxSize){
print(response, "the file size exceeds the limit", "");
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("yyyyMMdd").format(new Date());
if(dirType.equalsIgnoreCase("3"))
fileFolder = extenttionName.toLowerCase();
//文件存储的相对路径
String saveDirPath = baseDir+"/"+fileFolder+"/";
//文件存储在容器中的绝对路径
String saveFilePath = this.getServletConfig().getServletContext().getRealPath("")+saveDirPath;
System.out.println("saveFilePath:"+saveFilePath);
//构件文件目录以及目录文件
File fileDir = new File(saveFilePath);
if(!fileDir.exists())
fileDir.mkdirs();
//文件重命名
String fileName = UUID.randomUUID().toString();
System.out.println("fileName:"+fileName);
File savefile = new File(saveFilePath+fileName+"."+extenttionName);
//存储上传文件
uploadFile.write(savefile);
System.out.println("存储上传文件！");
System.out.println("savefile:"+savefile);
//其中的OnlineExamManagement是项目名称
newFileName = "/OnlineExamManagement"+saveDirPath+fileName+"."+extenttionName;
}catch(Exception e){
System.out.println(e.getMessage());
newFileName="";
err = "error:"+e.getMessage();
}
print(response, err, newFileName);
}
/**
* 使用I/0流输出 json格式的数据
*/
public void print(HttpServletResponse response,String err,String newFileName)throws IOException{
PrintWriter out = response.getWriter();
out.print("{"err":""+err+"","msg":""+newFileName+""}");
out.flush();
out.close();
}
}
[解决办法]
web.xml配置：
<servlet>
<servlet-name>UploadFileServlet</servlet-name>
<servlet-class>com.augmentum.xheditor.UploadFileServlet</servlet-class>
<init-param>
<param-name>baseDir</param-name>
<param-value>/ARTICLE_IMG</param-value>
</init-param>
<init-param>
<param-name>FileExt</param-name>
<param-value>jpg,jpeg,gif,bmp,png</param-value>
</init-param>
<init-param>
<param-name>maxSize</param-name>
<param-value>1024000</param-value>
</init-param>
<init-param>
<param-name>dirType</param-name>
<param-value>1</param-value>
</init-param>
<load-on-startup>5</load-on-startup>
</servlet>
<servlet-mapping>
<servlet-name>UploadFileServlet</servlet-name>
<url-pattern>/servlet/UploadFileServlet</url-pattern>
</servlet-mapping>
页面上若不是js初始化，也可以class初始化
<textarea name="content" class="xheditor"></textarea>
