论坛首页 → Web前端技术论坛 →

xhEditor文件上传的Java实现

浏览 23318 次
锁定老帖子 主题：xhEditor文件上传的Java实现
精华帖 (1) :: 良好帖 (0) :: 新手帖 (1) :: 隐藏帖 (0)
作者 正文
  • pengxiang01
  • 等级: 初级会员
  • 性别:
  • 文章: 6
  • 积分: 30
  • 来自: 成都
   发表时间：2010-11-21  
哇 太好了 我也在苦于找不到在线文本编辑器 
返回顶楼
          回帖地址
0 请登录后投票
  • pengxiang01
  • 等级: 初级会员
  • 性别:
  • 文章: 6
  • 积分: 30
  • 来自: 成都
   发表时间：2010-11-21  
要是有struts2 整合 在线文本编辑器的上传就好了
返回顶楼
          回帖地址
0 请登录后投票
  • jiang_huatao
  • 等级: 初级会员
  • 性别:
  • 文章: 2
  • 积分: 30
  • 来自: 西安
   发表时间：2010-12-31  
xhEditor真是个好东西，楼主辛苦了。我在网上找了个官方的最新版本xheditor-1.1.2， 但用不了啊。。。。
呵，还是楼主这个好使。 。。。。 
返回顶楼
          回帖地址
0 请登录后投票
  • shochocinn
  • 等级: 初级会员
  • 性别:
  • 文章: 9
  • 积分: 30
  • 来自: 上海
   发表时间：2010-12-31  
已经实现了对CKEdit的完全替换.太强大了.
返回顶楼
          回帖地址
0 请登录后投票
  • Chen.H
  • 等级: 初级会员
  • 性别:
  • 文章: 32
  • 积分: 50
  • 来自: 北京
   发表时间：2011-05-11  
过来说说，看了楼主发的帖子了，楼主一点奉献精神都没有，搞的挺火热，发的代码是图片，下载并无配置。无奉献精神！！！！
YiSingQ 写道
最近在做项目的时候需要使用到HTML编辑器，虽然FCKEditor、 CKEditor等很多现成的工具，但是为了相对的轻量级设计，选择了xhEditor。苦于网上很难找到相关的基于Java的后台实现，故花了点时间做了个编辑器的小demo，主要是解决图片上传的问题。
以下是对xhEditor使用的基本总结：
1、下载xhEditor最新版本【这里演示的是1.0.0 – RC3】
下载地址：http://code.google.com/p/xheditor/downloads/list

2、解压压缩文件 【demo文件夹中可以查看各种形式的配置实例】，将其中的jquery- 1.4.2.min.js、xheditor-zh-cn.min.js【这里暂时使用中文版】以及 xheditor_emot、xheditor_plugins和xheditor_skin三个文件夹拷贝到项目的相应目录。

3、在相应html文件的head标签结束之前添加：
<script src="jquery-1.4.2.min.js"  type="text/javascript"></script>
<script src="xheditor-zh-cn.min.js"  type="text/javascript"></script>

4、调用方法有两种：
方法1：在textarea上添加属性： class="xheditor {skin:'default'}"，前面主参数也可以是xheditor-mini和xheditor-simple，分别加载迷你和简单工具栏，后面详细参数可以省略。
【推荐使用】方法2： 在您的页面初始JS代码里加上： $(“#xh_editor”).xheditor();

$(document).ready(function()
$('#xh_editor').xheditor({
tools:'full',
skin:'default',
upMultiple:false,
upImgUrl: "/servlet/XhEditorUploadServlet",
upImgExt: "jpg,jpeg,gif,bmp,png",
onUpload:insertUpload //指定回调函数,需要自己另外在编写函数实现回调处理.
});
});

 

5、使用MyEclipse创建Java Web项目

把下载的xhEditor源代码包中的相关文件拷贝到自己的web目录，可以创建一个文件夹scripts存放。
如下图所示： 

 

可以看出我们大致需要这几个步骤：

获取xheditor源文件并放置到项目的相应位置。

加入文件上传组件需要的jar包。

指定文件存放目录ARTICLE_IMG。

创建Servlet文件，并在web.xml中配置路径。

创建并编写基于jquery脚本的xheditor.html文件。

6、 编写HTML或者JSP页面

 
注意：上述代码基于jquery。upImgUrl属性配置的是图片上传的后台路径，/xheditor /servlet /UploadFileServlet：xheditor属于项目名称，后面的/servlet/UploadFileServlet是web.xml中配置的servlet地址。

7、 编写后台文件上传处理的Servlet代码


 

8、web.xml的servlet配置


 

9、 配置基本完成，部署到tomcat容器测试。
打来浏览器，进入HTML页面，xheditor编辑器初始化状态。如图所示。


 

10、 图片上传到后台并且显示到编辑器
点击工具栏的图片上传按钮，然后根据上传按钮选择本地文件，图片将立刻以AJAX的方式上传到后台。如图所示。



11、上传成功的结果示例图

 
到这里基于Java后台的xheditor编辑器的图片上传功能基本实现完毕，编辑器基于jquery编写，具有非常好的拓展性和伸缩性，各位读者还可以根据自己的兴趣慢慢挖掘源代码包中的其他示例，同时也能用Java去实现它们，这样就最好咯。以后我们做项目的时候就可以立刻拿来使用，方便快捷，省去很多麻烦事。

总结： 本示例只是简单地选取了xheditor的其中一个 Ajax图片上传模块，还有其他很多的编辑器示例可以使用，请各位读者有空可以慢慢研究下，相互交流下心得这次做这个示例也是应为网上很难能找到关于 Java项目如何是用xheditor的资料，故花了几天的时间搞出这个小demo。

 

 




图片文件上传成功后，点击确定按钮才能把图片显示到编辑器中，同时页面下方将会保存checkbox，对应的是文件的名称，这样方便页面提交后，到后台相应的目录寻找文章对应的图片有那些，然后可以把图片写入到数据库。
如果有哪些地方错误或者不对的地方请各位指正，谢谢。附件中带有demo源代码。

 
返回顶楼
          回帖地址
0 请登录后投票
  • liudonghua007
  • 等级: 初级会员
  • 性别:
  • 文章: 1
  • 积分: 30
  • 来自: 南京
   发表时间：2011-05-31  
楼主辛苦了，必须要支持一下！！！
返回顶楼
          回帖地址
0 请登录后投票
论坛首页 → Web前端技术版

跳转论坛:
Global site tag (gtag.js) - Google Analytics