Java 实现 xhEditor 文件上传处理

痛定思痛。 2021-09-14 04:42 383阅读 0赞

**最近在做项目的时候需要使用到HTML编辑器，虽然FCKEditor、 CKEditor等很多现成的工具，但是为了相对的轻量级设计，选择了xhEditor。苦于网上很难找到相关的基于Java的后台实现，故花了点时间做 了个编辑器的小demo，主要是解决图片上传的问题。**** **

** **

**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存放。    
如下 图所示：   
![21193253_vpun.png][]  
    
**可以看出我们大致需要这几个步骤：**    
  
1. 获取xheditor源文件并放置到项目的相应位置。    
2. 加入文件上传组件需要的jar包。    
3. 指 定文件存放目录ARTICLE\_IMG。    
4. 创建Servlet文件，并在web.xml中配置路径。    
5. 创建并编写基于jquery脚本的xheditor.html文件。    
  
**6、 编写HTML或者JSP页面**

![21193254_ycFq.png][]  
   
注意：上述代码基于jquery。upImgUrl属性配置的是图片上传的后台路径，/xheditor /servlet /UploadFileServlet：xheditor属于项目名称，后面的/servlet/UploadFileServlet是web.xml中 配置的servlet地址。  
  
**7、 编写后台文件上传处理的Servlet代码  
  
![21193254_kn4s.png][]  
   
  
8、web.xml的servlet配置  
  
![21193254_Jb2v.png][]  
 **  
  
**9、 配置基本完成，部署到tomcat容器测试。**   
打来浏览器，进入HTML页面，xheditor编辑器初始化状态。如图所示。   
  
![点击查看原始大小图片][21193254_VzrI.png]

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

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

![点击查看原始大小图片][21193255_ytKV.png]  
  
图片文件上传成功后，点击确定按钮才能把图片显示到编辑器中，同时 页面下方将会保存checkbox，对应的是文件的名称，这样方便页面提交后，到后台相应的目录寻找文章对应的图片有那些，然后可以把图片写入到数据库。

[21193253_vpun.png]: /images/20210813/35afd61c8eaa4161a0136f5044e3470a.png
[21193254_ycFq.png]: /images/20210813/9327903333a54765a35e6577578ec89b.png
[21193254_kn4s.png]: /images/20210813/c8461848fe844207a4bb07391130b4a2.png
[21193254_Jb2v.png]: /images/20210813/612b33ef34824817b3880fdd374577ae.png
[21193254_VzrI.png]: /images/20210813/c18ddc7a51354c91a4e8f5e7ca77239b.png
[21193254_B1RR.png]: /images/20210813/3d66ee7426014b1ab6e780c8d546dc34.png
[21193255_ytKV.png]: /images/20210813/e1b9a976ccfb47e8bd53491631ab5691.png