xhEditor与Java结合使用
xhEditor是一个轻量级的html编辑器，使用它可以非常方便的编辑图文内容，然而官方文档中只有php的演示，没有Java版的，最近两天参考网上各种各样的文档，琢磨了一下用法，现已可以正常运行，现在分享出来，不足之处，欢迎指正。
下载好xheditor之后，先在webcontent文件夹中新建目录xheditor，再把以上文件拷贝进去。
新建一个index.jsp文件：
<%@page import="lenve.test.Msg"%>
<%@page import="lenve.test.dao.Dao"%>
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme() + "://"
+ request.getServerName() + ":" + request.getServerPort()
+ path + "/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<title>My JSP 'index.jsp' starting page</title>
<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" href="<%=path%>/xheditor/common.css"
type="text/css" media="screen" />
<script type="text/javascript"
src="<%=path%>/xheditor/jquery/jquery-1.4.2.min.js"></script>
<script type="text/javascript"
src="<%=path%>/xheditor/xheditor-zh-cn.min.js?v=1.1.5"></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",
upFlashUrl : "servlet/UploadSwfServlet",
upFlashExt : "swf",
upMediaUrl : "servlet/UploadMediaServlet",
upMediaExt : "wmv,avi,wma,mp3,mid",
onUpload : insertUpload,
html5Upload : false
});
//xbhEditor编辑器图片上传回调函数
function insertUpload(msg) {
var _msg = msg.toString();
var _picture_name = _msg.substring(_msg
.lastIndexOf("/") + 1);
///20150522/67c5f73e-5617-4fa0-a404-b3c2bdb1b01c.jpg
var _picture_path = Substring(_msg);
var _str = "<input type='checkbox' name='_pictures' value='"+_picture_path+"' checked='checked' onclick='return false'/><label>"
+ _picture_name + "</label><br/>";
$("#xh_editor").append(_msg);
$("#uploadList").append(_str);
}
//处理服务器返回到回调函数的字符串内容,格式是JSON的数据格式.
function Substring(s) {
return s.substring(s.substring(0,
s.lastIndexOf("/")).lastIndexOf("/"),
s.length);
}
});
</script>
</head>
<body>
<form action="<%=path%>/xheditorServlet" method="post">
<div>
标题：<input type="text" name="title" />
<textarea id="xh_editor" name="contents" rows="25"
style="width: 100%; border: 1px"></textarea>
</div>
<div id="uploadList"></div>
<br /> <input type="submit" value="提交" name="submit" /> <input
type="reset" value="重置" name="reset" />
</form>
</body>
</html>图片上传servlet:
public class UploadFileServlet extends HttpServlet {
// \attached\
private static String baseFileDir = File.separator + "attached"
+ File.separator;// 上传文件存储目录
// /attached/
private static String baseURLDir = "/attached/";// 上传文件目录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 {
/* 获取文件上传存储的相对路径 */
// 如果配置文件中的baseDir不为空，就以配置文件为主，否则使用上文定义的地址
if (!StringUtils.isBlank(this.getInitParameter("baseDir"))) {
baseFileDir = this.getInitParameter("baseDir");
}
// 拿到baseFileDir的绝对路径
// E:\workspace\sts\.metadata\.plugins\org.eclipse.wst.server.core\tmp0\wtpwebapps\HTMLEditor\attached
String realBaseDir = this.getServletConfig().getServletContext()
.getRealPath(baseFileDir);
File baseFile = new File(realBaseDir);
// 如果工程中不存在attached文件夹，则创建
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");
// 如果web.xml中未配置dirType，缺省值为1
if (StringUtils.isBlank(dirType))
dirType = "1";
// 如果web.xml中配置了非法的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();
/**
* isFormField方法用来判断FileItem对象里面封装的数据是一个普通文本表单字段，
* 还是一个文件表单字段。如果是普通文本表单字段，返回一个true否则返回一个false。
* 因此可以用该方法判断是否是普通表单域还是文件上传表单域。
*/
// item.getFieldName()值为filedata
if (item.isFormField()) {
fields.put(item.getFieldName(), item.getString());
} else {
fields.put(item.getFieldName(), item);
}
}
/* 获取表单的上传文件 */
FileItem uploadFile = (FileItem) fields.get("filedata");
//获取上传文件名称 如：Image 001.jpg
String fileNameLong = uploadFile.getName();
/* 获取文件扩展名 */
/* 索引加1的效果是只取xxx.jpg的jpg */
String extensionName = fileNameLong.substring(fileNameLong
.lastIndexOf(".") + 1);
/* 检查文件类型 */
// 返回指定字符在此字符串中第一次出现处的索引。如果没有找到，则返回-1
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 saveDirPath = baseFileDir + fileFolder + "/";
/* 文件存储在容器中的绝对路径 */
String saveFilePath = this.getServletConfig().getServletContext()
.getRealPath("")
+ baseFileDir + fileFolder + "/";
/* 构建文件目录以及目录文件 */
File fileDir = new File(saveFilePath);
if (!fileDir.exists()) {
fileDir.mkdirs();
}
/* 重命名文件 */
String filename = UUID.randomUUID().toString();
File savefile = new File(saveFilePath + filename + "."
+ extensionName);
/* 存储上传文件 */
uploadFile.write(savefile);
// http://localhost:80/HTMLEditor
String projectBasePath = request.getScheme() + "://"
+ request.getServerName() + ":" + request.getServerPort()
+ request.getContextPath();
// 上传文件URL回调
// newFileName =projectBasePath + baseURLDir + fileFolder + "/" +
// filename + "." + extensionName;
// 加上！表示为立即上传模式，不加！上传成功之后需要点击确定按钮才会在编辑器中显示
newFileName = "!" + projectBasePath + baseURLDir + fileFolder + "/"
+ filename + "." + extensionName;
System.out.println(newFileName);
} catch (Exception ex) {
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();
}
}注释已经很详细了，不再赘述。
文本上传servlet:
@WebServlet("/xheditorServlet")
public class XHEditor extends HttpServlet {
private static final long serialVersionUID = 1L;
private Dao msgDao;
protected void doGet(HttpServletRequest request,
HttpServletResponse response) throws ServletException, IOException {
request.setCharacterEncoding("UTF-8");
response.setContentType("text/html;charset=UTF-8");
response.setHeader("Cache-Control", "no-cache");
String content = request.getParameter("contents");
String title = request.getParameter("title");
if (content == null || content.equals("")||title==null||title.equals(""))
return;
msgDao.addMsg(title,content);
}
protected void doPost(HttpServletRequest request,
HttpServletResponse response) throws ServletException, IOException {
doGet(request, response);
}
@Override
public void init() throws ServletException {
msgDao = new Dao();
}
}web.xml
<?xml version="1.0" encoding="UTF-8"?>
<web-app version="2.5" xmlns="http://java.sun.com/xml/ns/javaee"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://java.sun.com/xml/ns/javaee
http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd">
<servlet>
<servlet-name>XhEditor</servlet-name>
<servlet-class>lenve.test.UploadFileServlet</servlet-class>
<init-param>
<param-name>baseDir</param-name>
<param-value>/attached/</param-value>
</init-param>
</servlet>
<servlet-mapping>
<servlet-name>XhEditor</servlet-name>
<url-pattern>/servlet/UploadFileServlet</url-pattern>
</servlet-mapping>
<welcome-file-list>
<welcome-file>index.jsp</welcome-file>
</welcome-file-list>
</web-app> xhEditor与Java结合使用的更多相关文章
- Spark案例分析
一.需求:计算网页访问量前三名 import org.apache.spark.rdd.RDD import org.apache.spark.{SparkConf, SparkContext} /* ...
- xheditor上传图片的java实现
最近一个项目中因为框架的原因,很多文本编辑器都不兼容,最后找到xheditor,这个富文本编辑器的确不错,功能基本都能满足,只是上传图片的java接口需要自己写,因此,测试了两种方法,最终成功.分享给 ...
- java使用xheditor Ajax异步上传错误
java使用xheditor Ajax异步上传时候错误如下:the request doesn't contain a multipart/form-data or multipart/mixed s ...
- [置顶] Java Web开发教程来袭
Java Web,是用Java技术来解决相关web互联网领域的技术总和.web包括:web服务器和web客户端两部分.Java在客户端的应用有java applet不过现在使用的很少,Java在服务器 ...
- xheditor在线编辑器的使用
在你所需要在线编辑器的工程目录下,导入xheditor_emot.xheditor_plugins和xheditor_skin.jquery四个文件夹,然后在textarea标签中加入: class= ...
- 关于xhEditor
关于xhEditor xhEditor是一个基于jQuery开发的简单迷你并且高效的在线可视化HTML编辑器,基于网络访问并且兼容IE 6.0+,Firefox 3.0+,Opera 9.6+,Chr ...
- xhEditor实现插入代码功能
如果大家经常使用CSDN或者其他技术博客,都会有插入程序代码或脚本功能 开源中国 CSDN 这里介绍xhEditor实现插入代码功能,对xhEditor进行插件扩展 一.首先定义插件样式 <st ...
- 最新Java技术
最近在网上查资料碰到好多没接触过的技术,先汇总在这里备用,以后慢慢吸收 1. JNA JNI的替代品,调用方式比JNI更直接,不再需要JNI那层中间接口,几乎达到Java直接调用动态库 2. Smal ...
- 【转】xhEditor技术手册 网页编辑器基础教程
1. xhEditor入门基础 1.1. 在线可视化HTML编辑器概述1.2. 获取xhEditor1.3. xhEditor运行环境1.4. xhEditor基本使用指南 1.1. 在线可视化HTM ...
随机推荐
- Java 构造器 一道构造器调用子类重载方法的题目
构造器中不能new本类对象,否则进入死循环. 构造器没有返回值,也没有void修饰. 使用关键字super可以调用父类的构造器,而且这一句必须放在第一句的位置,否则无法编译. 题目: 请写出以下程序的 ...
- OA学习笔记-004-Spring2.5配置
一.jar包 (1)spring.jar (2)Aop包 aspectjrt.jaraspectjweaver.jar (3)动态代理 cglib-nodep-2.1_3.jar (4)日志 comm ...
- on the wane
从文章PHP, Once The Web's Favorite Programming Language, Is On The Wane看到on the wane的说法. becoming less; ...
- python 替换windows换行符为unix格式
windows 默认换行符为 \r\n; unix默认换行符为 \n; 所以当win下编辑的脚本在linux下显示末尾多了^M: 换行符修改为同一的unix格式脚本如下: def run(path,f ...
- 【HDOJ】2732 Leapin' Lizards
贪心+网络流.对于每个结点,构建入点和出点.对于每一个lizard>0,构建边s->in position of lizard, 容量为1.对于pillar>0, 构建边in pos ...
- JS 利用数组拼接html字符串
var cc = []; cc.push('<td colspan=' + fields.length + ' style="padding:10px 5px;border:0;&qu ...
- ELK之nginx日志分析图表创建
一.kibana面板介绍 Discover:查询数据Visualize:统计图表Dashboard:显示面板,添加相应的图表在面板中Settings:创建索引 二.图表创建 1.饼图创建 以创建一个状 ...
- Linux Shell脚本中点号和source命令
Linux中一个文件是根据其是否具有执行属性来判断他是否可以直接运行的.就像Windows下的exe一样.如果我们要执行某一个文件,可以先将其权限修改为可执行(必须是所有者或者root才能修改).然后 ...
- C# TypeConverter 数据转换
提供一种将值的类型转换为其他类型以及访问标准值和子属性的统一方法. 自定义Converter: public class GenericListTypeConverter<T> : Typ ...
- show drop down menu within/from action bar
show drop down menu within/from action bar */--> pre { background-color: #2f4f4f;line-height: 1.6 ...