struts2 配置 xheditor

这两天要做一个业务需要使用富文本编辑器，以前用的是重量级的Fckeditor，功能太多，所以需求要求要一个轻量级的编辑器，可以上传图片和文字的简单排版即可。于是，在百度寻寻觅觅，觉得xheditor编辑器（就是csdn，我现在正在写博客的编辑器）不错。可当我在百度找配置时（struts2配置xheditor），相关的资料只有几篇博客。还写得很精简，反正我导入是有错误的，而且写得又不全...不禁感慨，在java的世界里，居然没有一个傻瓜式的配置。经过我一天的研究（在前人的基础上），终于在刚才成功配置了。现在，为了造福广大后人，我决定写下这篇博客。开始吧：

 

第一步，先看效果：

 

 

第二步，下载好xheditor插件

这是官网：http://xheditor.com/download

我下的是下面图中第2个：1.1.14版本的

 

下好解压之后，是下图的模样：

 

 

然后到myeclipse的项目的web-root目录下，将一个文件夹：xheditor ,把上面的文件拷进去，如下：

（我把demo去掉了）

 

 

第三步，写jsp界面

 

[html] view plain copy
 
 在CODE上查看代码片派生到我的代码片
  1. <%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>  
  2. <%  
  3.     String path = request.getContextPath();  
  4.     String basePath = request.getScheme() + "://"  
  5.             + request.getServerName() + ":" + request.getServerPort()  
  6.             + path + "/";  
  7. %>  
  8.   
  9. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">    
  10. <html>    
  11.   <head>    
  12.     <base href="<%=basePath%>">    
  13.         
  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. <!--  
  21. <link rel="stylesheet" type="text/css" href="styles.css">  
  22. -->    
  23.     <script src="${pageContext.request.contextPath}/xheditor/jquery/jquery-1.4.4.min.js" type="text/javascript"></script>    
  24.     <script src="${pageContext.request.contextPath}/xheditor/xheditor-1.1.14-zh-cn.min.js" charset="utf-8" type="text/javascript"></script>    
  25.   </head>    
  26.       
  27.   <body>    
  28.   
  29. <textarea id="elm1" name="elm1" style="width:860px;height:480px;background:url(img/demobg.jpg) no-repeat right bottom fixed"></textarea>  
  30.   </body>    
  31.   <script type="text/javascript">    
  32.   jQuery(document).ready(function(){    
  33.   $(pageInit);    
  34.     var editor;    
  35. function pageInit()    
  36. {    
  37.     editor=$('#elm1').xheditor({html5Upload:false,tools:'mini',upMultiple:'1',upLinkUrl:'demos/upload.php?immediate=1',upImgUrl:'${pageContext.request.contextPath}/build/ImgUpload.action',upFlashUrl:'demos/upload.php?immediate=1',upMediaUrl:'demos/upload.php?immediate=1',localUrlTest:/^https?:\/\/[^\/]*?(xheditor\.com)\//i,remoteImgSaveUrl:'demos/saveremoteimg.php',emots:{    
  38.         msn:{name:'MSN',count:40,width:22,height:22,line:8},    
  39.     },loadCSS:'<style>pre{margin-left:2em;border-left:3px solid #CCC;padding:0 1em;}</style>',shortcuts:{'ctrl+enter':submitForm}});    
  40. }    
  41.     
  42. function submitForm(){$('#frmDemo').submit();}    
  43. });    
  44.   </script>    
  45. </html>    


有一些配置还是要说下：

 

 

[html] view plain copy
 
 在CODE上查看代码片派生到我的代码片
  1. <textarea id="elm1" name="elm1" style="width:860px;height:480px;background:url(img/demobg.jpg) no-repeat right bottom fixed"></textarea>  

 

这一行就是xheditor编辑器的外观配置，javascript部分是对编辑器上传路径配置，图片是 upImgUrl属性，tools 是编辑器所需的功能，比如我在上面设定tools:'mini'，mini只有几个，上传图片还有拍一下文字，如果是tools:'simply' 功能就多一点，。。。等等

xheditor弹出的上传图片窗口是，是用ajax上传到后台的，所以我们就来开相应的Action

 

第四步，写Action

 

 

[java] view plain copy
 
 在CODE上查看代码片派生到我的代码片
  1. package com.yctime.taste.web.Action;  
  2.   
  3. import java.io.File;  
  4. import java.io.IOException;  
  5. import java.io.PrintWriter;  
  6. import java.util.UUID;  
  7.   
  8. import javax.servlet.http.HttpServletRequest;  
  9. import javax.servlet.http.HttpServletResponse;  
  10.   
  11. import org.apache.commons.io.FileUtils;  
  12. import org.apache.struts2.ServletActionContext;  
  13.   
  14. import com.opensymphony.xwork2.ActionContext;  
  15. import com.opensymphony.xwork2.ActionSupport;  
  16.   
  17. public class ImgUploadAction extends ActionSupport {  
  18.       
  19.     private File filedata;      
  20.     private String filedataContentType;         
  21.     private String filedataFileName;        
  22.     private String err;      
  23.     private String msg;      
  24.     private String message;      
  25.     private String fileExt = "jpg,jpeg,gif,bmp,png";          
  26.           
  27.    private HttpServletResponse response=ServletActionContext.getResponse();   
  28.     
  29.     public String upload()throws Exception{    
  30.         //System.out.println("before");  
  31.     String saveRealFilePath = ServletActionContext.getServletContext().getRealPath("/upload");     
  32.     File fileDir = new File(saveRealFilePath);     
  33.     if (!fileDir.exists()) {     
  34.         fileDir.mkdirs();     
  35.     }     
  36.     File savefile;     
  37.     String newFileName=UUID.randomUUID().toString()+filedataFileName.substring(filedataFileName.indexOf("."),filedataFileName.length());  
  38.     savefile = new File(saveRealFilePath + "/" + newFileName);  
  39.     FileUtils.copyFile(filedata,savefile);  
  40.     msg = "/Taste/upload/" + newFileName;     
  41.     err="";     
  42.     printInfo( err, msg);  
  43.     response.setContentType("text/html;charset=utf-8");  
  44.     PrintWriter out=response.getWriter();  
  45.     out.append(message);  
  46.     out.flush();  
  47.     out.close();  
  48.     System.out.println("message="+message);  
  49.     return "success";     
  50. }    
  51.  public void printInfo(String err,String newFileName) {     
  52.         message = "{\"err\":\"" + err + "\",\"msg\":\"" + newFileName     
  53.                         + "\"}";               
  54.  }  
  55.    
  56.    
  57.   
  58.  public File getFiledata() {  
  59.         return filedata;  
  60.     }  
  61.     public void setFiledata(File filedata) {  
  62.         this.filedata = filedata;  
  63.     }  
  64.     public String getFiledataContentType() {  
  65.         return filedataContentType;  
  66.     }  
  67.     public void setFiledataContentType(String filedataContentType) {  
  68.         this.filedataContentType = filedataContentType;  
  69.     }  
  70.     public String getFiledataFileName() {  
  71.         return filedataFileName;  
  72.     }  
  73.     public void setFiledataFileName(String filedataFileName) {  
  74.         this.filedataFileName = filedataFileName;  
  75.     }  
  76.     public String getErr() {  
  77.         return err;  
  78.     }  
  79.     public void setErr(String err) {  
  80.         this.err = err;  
  81.     }  
  82.     public String getMsg() {  
  83.         return msg;  
  84.     }  
  85.     public void setMsg(String msg) {  
  86.         this.msg = msg;  
  87.     }  
  88.     public String getMessage() {  
  89.         return message;  
  90.     }  
  91.     public void setMessage(String message) {  
  92.         this.message = message;  
  93.     }  
  94.     public String getFileExt() {  
  95.         return fileExt;  
  96.     }  
  97.     public void setFileExt(String fileExt) {  
  98.         this.fileExt = fileExt;  
  99.     }  
  100.    
  101.    
  102. }  

 

 

我们理清思路：编辑器在前端通过ajax上传图片到后台，后台接收处理后，将错误信息和图片的地址通过json返回给前端编辑器，让图片显示在编辑器中。好，在上面的代码中，有一句（最长的一句）：

 

String newFileName=UUID.randomUUID().toString()+filedataFileName.substring(filedataFileName.indexOf("."),filedataFileName.length());

 

在我的编程环境中，如果图片是中文命名的，在编辑器显示不出来，所以我干脆将它通过uuid重命名。

 

第五步，写struts.xml

 

 

[html] view plain copy
 
 在CODE上查看代码片派生到我的代码片
  1. <package name="build" extends="struts-default" namespace="/">  
  2.         <action name="ImgUpload" method="upload" class="ImgUploadAction">  
  3.         <result name="success">/WEB-INF/writerArtice.jsp</result>    
  4.         </action>  
  5.     </package>  


我使用的是ssh2框架，struts交给spring，所以在<action name="ImgUpload" method="upload" class="ImgUploadAction">这里，我的class是spring里面里bean的id，如果你不是用ssh，将class的ImgUploadAction换成全路径即可，即com.www.web.action.ImgUploadAction...具体根据你的项目，路径改动

 

 

到这里就完成了。

 

但是真正在配置中，是有很多问题的，比如

 

1.在上传图片的时候，弹出窗口提示：上传接口发生错误...返回的错误信息是....

很大原因是json数据没有返回到你的前端编辑器，好好检查后台，看看有没有： out.append(message); 因为 编辑器将图片传到后台，后台处理完数据后，将信息写在message中，返回给编辑器，所以，要确保message返回到编辑器

2.在上传图片的时候，弹出窗口提示：上传接口发生错误..500....

这次弹出的窗口比1的错误弹出的窗口大，而且是500错误，500错误是服务端错误，查看Action上传文件的语句又没有错误，如果没有，就查看struts.xml，看看路径、返回值又没有错

3.图片可以上传，在服务端可以看到上传的图片，但是在前端编辑器显示不了图片。

这几乎可以肯定是后台返回给编辑器的数据中，msg（图片的路径）写错了，比如："/Taste/upload/" + newFileName;  路径一定要跟你的存放图片的路径一样。

4.要注意的是，上面的所有代码是基于我自己的项目的，所以在参考是要根据自己的项目，把路径，名称改改。不要盲目拷代码

 

最后：祝大家成功

posted on 2016-01-26 16:36  J小浩子  阅读(150)  评论(0)    收藏  举报
博客园  ©  2004-2026
浙公网安备 33010602011771号 浙ICP备2021040463号-3