最近在做项目的时候需要使用到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();
下载地址: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() |
5、使用MyEclipse创建Java Web项目
把下载的xhEditor源代码包中的相关文件拷贝到自己的web目录,可以创建一个文件夹scripts存放。
如下图所示:
![](http://dl.iteye.com/upload/attachment/264842/4370b17a-e4be-3c6c-8383-29f2f58bf77b.png)
可以看出我们大致需要这几个步骤:
获取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的方式上传到后台。如图所示。
点击工具栏的图片上传按钮,然后根据上传按钮选择本地文件,图片将立刻以AJAX的方式上传到后台。如图所示。
![](http://dl.iteye.com/upload/attachment/264860/a0d90fa0-a8ed-3f1b-8e30-892d7197950b.png)
图片文件上传成功后,点击确定按钮才能把图片显示到编辑器中,同时页面下方将会保存checkbox,对应的是文件的名称,这样方便页面提交后,到后台相应的目录寻找文章对应的图片有那些,然后可以把图片写入到数据库。
11、上传成功的结果示例图
![](http://dl.iteye.com/upload/attachment/264862/d3423f1b-7e76-3f45-a3d6-2be1bfdaf9ed.png)
到这里基于Java后台的xheditor编辑器的图片上传功能基本实现完毕,编辑器基于jquery编写,具有非常好的拓展性和伸缩性,各位读者还可以根据自己的兴趣慢慢挖掘源代码包中的其他示例,同时也能用Java去实现它们,这样就最好咯。以后我们做项目的时候就可以立刻拿来使用,方便快捷,省去很多麻烦事。
总结: 本示例只是简单地选取了xheditor的其中一个 Ajax图片上传模块,还有其他很多的编辑器示例可以使用,请各位读者有空可以慢慢研究下,相互交流下心得这次做这个示例也是应为网上很难能找到关于 Java项目如何是用xheditor的资料,故花了几天的时间搞出这个小demo。
如果有哪些地方错误或者不对的地方请各位指正,谢谢。附件中带有demo源代码。