xhEditor是一个轻量级的html编辑器,使用它可以非常方便的编辑图文内容,然而官方文档中只有php的演示,没有Java版的,最近两天参考网上各种各样的文档,琢磨了一下用法,现已可以正常运行,现在分享出来,不足之处,欢迎指正。

下载好xheditor之后,先在webcontent文件夹中新建目录xheditor,再把以上文件拷贝进去。

新建一个index.jsp文件:

  1. <%@page import="lenve.test.Msg"%>
  2. <%@page import="lenve.test.dao.Dao"%>
  3. <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
  4. <%
  5. String path = request.getContextPath();
  6. String basePath = request.getScheme() + "://"
  7. + request.getServerName() + ":" + request.getServerPort()
  8. + path + "/";
  9. %>
  10. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
  11. <html>
  12. <head>
  13. <base href="<%=basePath%>">
  14. <title>My JSP 'index.jsp' starting page</title>
  15. <meta http-equiv="pragma" content="no-cache">
  16. <meta http-equiv="cache-control" content="no-cache">
  17. <meta http-equiv="expires" content="0">
  18. <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
  19. <meta http-equiv="description" content="This is my page">
  20. <link rel="stylesheet" href="<%=path%>/xheditor/common.css"
  21. type="text/css" media="screen" />
  22. <script type="text/javascript"
  23. src="<%=path%>/xheditor/jquery/jquery-1.4.2.min.js"></script>
  24. <script type="text/javascript"
  25. src="<%=path%>/xheditor/xheditor-zh-cn.min.js?v=1.1.5"></script>
  26. <script type="text/javascript">
  27. $(document)
  28. .ready(
  29. function() {
  30. //初始化xhEditor编辑器插件
  31. $('#xh_editor').xheditor({
  32. tools : 'full',
  33. skin : 'default',
  34. upMultiple : true,
  35. upImgUrl : "servlet/UploadFileServlet",
  36. upImgExt : "jpg,jpeg,gif,bmp,png",
  37. upFlashUrl : "servlet/UploadSwfServlet",
  38. upFlashExt : "swf",
  39. upMediaUrl : "servlet/UploadMediaServlet",
  40. upMediaExt : "wmv,avi,wma,mp3,mid",
  41. onUpload : insertUpload,
  42. html5Upload : false
  43. });
  44. //xbhEditor编辑器图片上传回调函数
  45. function insertUpload(msg) {
  46. var _msg = msg.toString();
  47. var _picture_name = _msg.substring(_msg
  48. .lastIndexOf("/") + 1);
  49. ///20150522/67c5f73e-5617-4fa0-a404-b3c2bdb1b01c.jpg
  50. var _picture_path = Substring(_msg);
  51. var _str = "<input type='checkbox' name='_pictures' value='"+_picture_path+"' checked='checked' onclick='return false'/><label>"
  52. + _picture_name + "</label><br/>";
  53. $("#xh_editor").append(_msg);
  54. $("#uploadList").append(_str);
  55. }
  56. //处理服务器返回到回调函数的字符串内容,格式是JSON的数据格式.
  57. function Substring(s) {
  58. return s.substring(s.substring(0,
  59. s.lastIndexOf("/")).lastIndexOf("/"),
  60. s.length);
  61. }
  62. });
  63. </script>
  64. </head>
  65. <body>
  66. <form action="<%=path%>/xheditorServlet" method="post">
  67. <div>
  68. 标题:<input type="text" name="title" />
  69. <textarea id="xh_editor" name="contents" rows="25"
  70. style="width: 100%; border: 1px"></textarea>
  71. </div>
  72. <div id="uploadList"></div>
  73. <br /> <input type="submit" value="提交" name="submit" /> <input
  74. type="reset" value="重置" name="reset" />
  75. </form>
  76. </body>
  77. </html>

图片上传servlet:

  1. public class UploadFileServlet extends HttpServlet {
  2. // \attached\
  3. private static String baseFileDir = File.separator + "attached"
  4. + File.separator;// 上传文件存储目录
  5. // /attached/
  6. private static String baseURLDir = "/attached/";// 上传文件目录URL
  7. // 可以上传的文件类型
  8. private static String fileExt = "jpg,jpeg,bmp,gif,png";
  9. private static Long maxSize = 0l;
  10. // 0:不建目录 1:按天存入目录 2:按月存入目录 3:按扩展名存目录 建议使用按天存
  11. private static String dirType = "1";
  12. /**
  13. * 文件上传初始化工作
  14. */
  15. public void init() throws ServletException {
  16. /* 获取文件上传存储的相对路径 */
  17. // 如果配置文件中的baseDir不为空,就以配置文件为主,否则使用上文定义的地址
  18. if (!StringUtils.isBlank(this.getInitParameter("baseDir"))) {
  19. baseFileDir = this.getInitParameter("baseDir");
  20. }
  21. // 拿到baseFileDir的绝对路径
  22. // E:\workspace\sts\.metadata\.plugins\org.eclipse.wst.server.core\tmp0\wtpwebapps\HTMLEditor\attached
  23. String realBaseDir = this.getServletConfig().getServletContext()
  24. .getRealPath(baseFileDir);
  25. File baseFile = new File(realBaseDir);
  26. // 如果工程中不存在attached文件夹,则创建
  27. if (!baseFile.exists()) {
  28. baseFile.mkdir();
  29. }
  30. /* 获取文件类型参数 */
  31. fileExt = this.getInitParameter("fileExt");
  32. if (StringUtils.isBlank(fileExt))
  33. fileExt = "jpg,jpeg,gif,bmp,png";
  34. /* 获取文件大小参数 */
  35. String maxSize_str = this.getInitParameter("maxSize");
  36. if (StringUtils.isNotBlank(maxSize_str))
  37. maxSize = new Long(maxSize_str);
  38. /* 获取文件目录类型参数 */
  39. dirType = this.getInitParameter("dirType");
  40. // 如果web.xml中未配置dirType,缺省值为1
  41. if (StringUtils.isBlank(dirType))
  42. dirType = "1";
  43. // 如果web.xml中配置了非法的dirType,修改其为1
  44. if (",0,1,2,3,".indexOf("," + dirType + ",") < 0)
  45. dirType = "1";
  46. }
  47. /**
  48. * 上传文件数据处理过程
  49. */
  50. @SuppressWarnings({ "unchecked" })
  51. public void doPost(HttpServletRequest request, HttpServletResponse response)
  52. throws ServletException, IOException {
  53. response.setContentType("text/html; charset=UTF-8");
  54. response.setHeader("Cache-Control", "no-cache");
  55. String err = "";
  56. String newFileName = "";
  57. DiskFileUpload upload = new DiskFileUpload();
  58. try {
  59. List<FileItem> items = upload.parseRequest(request);
  60. Map<String, Serializable> fields = new HashMap<String, Serializable>();
  61. Iterator<FileItem> iter = items.iterator();
  62. while (iter.hasNext()) {
  63. FileItem item = (FileItem) iter.next();
  64. /**
  65. * isFormField方法用来判断FileItem对象里面封装的数据是一个普通文本表单字段,
  66. * 还是一个文件表单字段。如果是普通文本表单字段,返回一个true否则返回一个false。
  67. * 因此可以用该方法判断是否是普通表单域还是文件上传表单域。
  68. */
  69. // item.getFieldName()值为filedata
  70. if (item.isFormField()) {
  71. fields.put(item.getFieldName(), item.getString());
  72. } else {
  73. fields.put(item.getFieldName(), item);
  74. }
  75. }
  76. /* 获取表单的上传文件 */
  77. FileItem uploadFile = (FileItem) fields.get("filedata");
  78. //获取上传文件名称 如:Image 001.jpg
  79. String fileNameLong = uploadFile.getName();
  80. /* 获取文件扩展名 */
  81. /* 索引加1的效果是只取xxx.jpg的jpg */
  82. String extensionName = fileNameLong.substring(fileNameLong
  83. .lastIndexOf(".") + 1);
  84. /* 检查文件类型 */
  85. // 返回指定字符在此字符串中第一次出现处的索引。如果没有找到,则返回-1
  86. if (("," + fileExt.toLowerCase() + ",").indexOf(","
  87. + extensionName.toLowerCase() + ",") < 0) {
  88. printInfo(response, "不允许上传此类型的文件", "");
  89. return;
  90. }
  91. /* 文件是否为空 */
  92. if (uploadFile.getSize() == 0) {
  93. printInfo(response, "上传文件不能为空", "");
  94. return;
  95. }
  96. /* 检查文件大小 */
  97. if (maxSize > 0 && uploadFile.getSize() > maxSize) {
  98. printInfo(response, "上传文件的大小超出限制", "");
  99. return;
  100. }
  101. // 0:不建目录, 1:按天存入目录, 2:按月存入目录, 3:按扩展名存目录.建议使用按天存.
  102. String fileFolder = "";
  103. if (dirType.equalsIgnoreCase("1"))
  104. fileFolder = new SimpleDateFormat("yyyyMMdd")
  105. .format(new Date());
  106. if (dirType.equalsIgnoreCase("2"))
  107. fileFolder = new SimpleDateFormat("yyyyMM").format(new Date());
  108. if (dirType.equalsIgnoreCase("3"))
  109. fileFolder = extensionName.toLowerCase();
  110. /* 文件存储的相对路径 */
  111. String saveDirPath = baseFileDir + fileFolder + "/";
  112. /* 文件存储在容器中的绝对路径 */
  113. String saveFilePath = this.getServletConfig().getServletContext()
  114. .getRealPath("")
  115. + baseFileDir + fileFolder + "/";
  116. /* 构建文件目录以及目录文件 */
  117. File fileDir = new File(saveFilePath);
  118. if (!fileDir.exists()) {
  119. fileDir.mkdirs();
  120. }
  121. /* 重命名文件 */
  122. String filename = UUID.randomUUID().toString();
  123. File savefile = new File(saveFilePath + filename + "."
  124. + extensionName);
  125. /* 存储上传文件 */
  126. uploadFile.write(savefile);
  127. // http://localhost:80/HTMLEditor
  128. String projectBasePath = request.getScheme() + "://"
  129. + request.getServerName() + ":" + request.getServerPort()
  130. + request.getContextPath();
  131. // 上传文件URL回调
  132. // newFileName =projectBasePath + baseURLDir + fileFolder + "/" +
  133. // filename + "." + extensionName;
  134. // 加上!表示为立即上传模式,不加!上传成功之后需要点击确定按钮才会在编辑器中显示
  135. newFileName = "!" + projectBasePath + baseURLDir + fileFolder + "/"
  136. + filename + "." + extensionName;
  137. System.out.println(newFileName);
  138. } catch (Exception ex) {
  139. newFileName = "";
  140. err = "错误: " + ex.getMessage();
  141. }
  142. printInfo(response, err, newFileName);
  143. }
  144. /**
  145. * 使用I/O流输出 json格式的数据
  146. *
  147. * @param response
  148. * @param err
  149. * @param newFileName
  150. * @throws IOException
  151. */
  152. public void printInfo(HttpServletResponse response, String err,
  153. String newFileName) throws IOException {
  154. PrintWriter out = response.getWriter();
  155. // String filename = newFileName.substring(newFileName.lastIndexOf("/")
  156. // + 1);
  157. out.println("{\"err\":\"" + err + "\",\"msg\":\"" + newFileName + "\"}");
  158. out.flush();
  159. out.close();
  160. }
  161. }

注释已经很详细了,不再赘述。

文本上传servlet:

  1. @WebServlet("/xheditorServlet")
  2. public class XHEditor extends HttpServlet {
  3. private static final long serialVersionUID = 1L;
  4. private Dao msgDao;
  5. protected void doGet(HttpServletRequest request,
  6. HttpServletResponse response) throws ServletException, IOException {
  7. request.setCharacterEncoding("UTF-8");
  8. response.setContentType("text/html;charset=UTF-8");
  9. response.setHeader("Cache-Control", "no-cache");
  10. String content = request.getParameter("contents");
  11. String title = request.getParameter("title");
  12. if (content == null || content.equals("")||title==null||title.equals(""))
  13. return;
  14. msgDao.addMsg(title,content);
  15. }
  16. protected void doPost(HttpServletRequest request,
  17. HttpServletResponse response) throws ServletException, IOException {
  18. doGet(request, response);
  19. }
  20. @Override
  21. public void init() throws ServletException {
  22. msgDao = new Dao();
  23. }
  24. }

web.xml

  1. <?xml version="1.0" encoding="UTF-8"?>
  2. <web-app version="2.5" xmlns="http://java.sun.com/xml/ns/javaee"
  3. xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
  4. xsi:schemaLocation="http://java.sun.com/xml/ns/javaee
  5. http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd">
  6. <servlet>
  7. <servlet-name>XhEditor</servlet-name>
  8. <servlet-class>lenve.test.UploadFileServlet</servlet-class>
  9. <init-param>
  10. <param-name>baseDir</param-name>
  11. <param-value>/attached/</param-value>
  12. </init-param>
  13. </servlet>
  14. <servlet-mapping>
  15. <servlet-name>XhEditor</servlet-name>
  16. <url-pattern>/servlet/UploadFileServlet</url-pattern>
  17. </servlet-mapping>
  18. <welcome-file-list>
  19. <welcome-file>index.jsp</welcome-file>
  20. </welcome-file-list>
  21. </web-app>

本项目完整代码下载

xhEditor与Java结合使用的更多相关文章

  1. Spark案例分析

    一.需求:计算网页访问量前三名 import org.apache.spark.rdd.RDD import org.apache.spark.{SparkConf, SparkContext} /* ...

  2. xheditor上传图片的java实现

    最近一个项目中因为框架的原因,很多文本编辑器都不兼容,最后找到xheditor,这个富文本编辑器的确不错,功能基本都能满足,只是上传图片的java接口需要自己写,因此,测试了两种方法,最终成功.分享给 ...

  3. java使用xheditor Ajax异步上传错误

    java使用xheditor Ajax异步上传时候错误如下:the request doesn't contain a multipart/form-data or multipart/mixed s ...

  4. [置顶] Java Web开发教程来袭

    Java Web,是用Java技术来解决相关web互联网领域的技术总和.web包括:web服务器和web客户端两部分.Java在客户端的应用有java applet不过现在使用的很少,Java在服务器 ...

  5. xheditor在线编辑器的使用

    在你所需要在线编辑器的工程目录下,导入xheditor_emot.xheditor_plugins和xheditor_skin.jquery四个文件夹,然后在textarea标签中加入: class= ...

  6. 关于xhEditor

    关于xhEditor xhEditor是一个基于jQuery开发的简单迷你并且高效的在线可视化HTML编辑器,基于网络访问并且兼容IE 6.0+,Firefox 3.0+,Opera 9.6+,Chr ...

  7. xhEditor实现插入代码功能

    如果大家经常使用CSDN或者其他技术博客,都会有插入程序代码或脚本功能 开源中国 CSDN 这里介绍xhEditor实现插入代码功能,对xhEditor进行插件扩展 一.首先定义插件样式 <st ...

  8. 最新Java技术

    最近在网上查资料碰到好多没接触过的技术,先汇总在这里备用,以后慢慢吸收 1. JNA JNI的替代品,调用方式比JNI更直接,不再需要JNI那层中间接口,几乎达到Java直接调用动态库 2. Smal ...

  9. 【转】xhEditor技术手册 网页编辑器基础教程

    1. xhEditor入门基础 1.1. 在线可视化HTML编辑器概述1.2. 获取xhEditor1.3. xhEditor运行环境1.4. xhEditor基本使用指南 1.1. 在线可视化HTM ...

随机推荐

  1. Ubuntu使用wget下载jdk问题

    使用以下命令可下载成功,否则下载下来的可能是一个html文档. wget --no-cookies --no-check-certificate --header "Cookie:gpw_e ...

  2. Web API路由与动作(三)

    本章包括三个小节  如果你输入了mvc的路由规则 这个可以粗略过一遍即可  内容说明有点繁琐 原文地址:http://www.asp.net/web-api/overview/web-api-rout ...

  3. SPRING IN ACTION 第4版笔记-第三章ADVANCING WIRING-005-Bean的作用域@Scope、ProxyMode

    一. Spring的bean默认是单例的 But sometimes you may find yourself working with a mutable class that does main ...

  4. kernel 校验和实现

    kernel 校验和实现 Kernel checksum implementation ) TCP包的错误检测使用16位累加和校验. 除了TCP包本身, TCP校验数据块还包括源IP地址,目的IP地址 ...

  5. ListView 的position和id的区别

    我们在使用ListView的时候,一般都会为ListView添加一个响应事件android.widget.AdapterView.OnItemClickListener.本文主要在于对OnItemCl ...

  6. Three ways to do WCF instance management

    Three ways to do WCF instance management (Per call, Per session, and Single). IntroductionVery often ...

  7. UVA_437_The_Tower_of_the_Babylon_(DAG上动态规划/记忆化搜索)

    描述 https://uva.onlinejudge.org/index.php?option=com_onlinejudge&Itemid=8&page=show_problem&a ...

  8. wikioi 1514 and ZJOI2006 书架

    1514 书架 0人推荐 收藏 发题解 提交代码 报错 题目描述 输入描述 输出描述 样例输入 样例输出 提示 题目描述 Description 小 T有一个很大的书柜.这个书柜的构造有些独特,即书柜 ...

  9. 【Android 复习】 : Activity之间传递数据的几种方式

    在Android开发中,我们通常需要在不同的Activity之间传递数据,下面我们就来总结一下在Activity之间数据传递的几种方式. 1. 使用Intent来传递数据 Intent表示意图,很多时 ...

  10. [C# 网络编程系列]专题九:实现类似QQ的即时通信程序

    转自:http://www.cnblogs.com/zhili/archive/2012/09/23/2666987.html 引言: 前面专题中介绍了UDP.TCP和P2P编程,并且通过一些小的示例 ...