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 ...
随机推荐
- 【iOS开发必收藏】详解iOS应用程序内使用IAP/StoreKit付费、沙盒（SandBox）测试、创建测试账号流程！【2012-12-11日更新获取”产品付费数量等于0的问题”】
转的别人的 看到很多童鞋问到,为什么每次都返回数量等于0?? 其实有童鞋已经找到原因了,原因是你在 ItunesConnect 里的 “Contracts, Tax, and Banking”没有完成 ...
- 【20161030la 】总结
就写个题解 1. 生成树(Tree) 有一种图形叫做五角形圈.一个五角形圈的中心有1个由n个顶点和n条边组成的圈.在中心的这个n边圈的每一条边同时也是某一个五角形的一条边,一共有n个不同的五角形.这些 ...
- CAS单点登录配置[3]：服务器端配置
在准备工作,证书生成等工作完成后,本篇介绍服务器端的配置. JDK配置 1 我们将生成的cacerts文件分别拷贝到JDK目录下的jre/lib/security目录下及JRE对应的目录中,如果之前存 ...
- WIN32和Kernel)直接读写硬盘扇区
第一篇写技术的文章哦,以前好少写文章,我的文字表达很差劲,大家不要笑哦.前几天仙剑4通关了,感觉好惆怅,什么都不想去做.今天看了一下书发现一篇比较好玩的文章,于是自己静静地实践一番.文章是<基于 ...
- Oracle core06_latch&lock
lock and latch 在oracle中为了保护共享资源,使用了两种不同的锁机制lock和latch,这两种锁有明显不同点: 1,lock和pin,采用的是队列的方式,先来先服务的策略,latc ...
- MySQL源码之mysqld启动
启动mysqld,并进入listen阶段 函数调用栈: mysqld_main(): my_init();初始化变量,锁,错误串 my_thread_global_init ...
- bzoj1233
首先这道题有一个很重要的贪心就是 在保证所有干草堆都能参与搭建的前提下,我们尽量使最底层的宽度小,这样搭起来的的干草堆高度一定是最高的 当我们以第i个干草堆为一层,显然最优的情况是找到一个尽可能小的j ...
- android 获取设备唯一标识完美解决方案
/** * deviceID的组成为:渠道标志+识别符来源标志+hash后的终端识别符 * * 渠道标志为: * 1,andriod(a) * * 识别符来源标志: * 1, wifi mac地址(w ...
- 水题：HDU 5119 Happy Matt Friends
Matt has N friends. They are playing a game together.Each of Matt's friends has a magic number. In t ...
- 外部exe窗体嵌入winform
using System; using System.Collections.Generic; using System.ComponentModel; using System.Drawing; u ...