struts2 配置 xheditor

墨蓝 2022-08-20 02:18 229阅读 0赞

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

第一步，先看效果：

![Center][]

第二步，下载好xheditor插件

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

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

![Center 1][]

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

![Center 2][]

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

（我把demo去掉了）

![Center 3][]

第三步，写jsp界面

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
    <%
    	String path = request.getContextPath();
    	String basePath = request.getScheme() + "://"
    			+ request.getServerName() + ":" + request.getServerPort()
    			+ path + "/";
    %>
    
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">  
    <html>  
      <head>  
        <base href="<%=basePath%>">  
          
        <title>My JSP 'index.jsp' starting page</title>  
    <meta http-equiv="pragma" content="no-cache">  
    <meta http-equiv="cache-control" content="no-cache">  
    <meta http-equiv="expires" content="0">      
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">  
    <meta http-equiv="description" content="This is my page">  
      
        <script src="${pageContext.request.contextPath}/xheditor/jquery/jquery-1.4.4.min.js" type="text/javascript"></script>  
        <script src="${pageContext.request.contextPath}/xheditor/xheditor-1.1.14-zh-cn.min.js" charset="utf-8" type="text/javascript"></script>  
      </head>  
        
      <body>  
    
    <textarea id="elm1" name="elm1" style="width:860px;height:480px;background:url(img/demobg.jpg) no-repeat right bottom fixed"></textarea>
      </body>  
      <script type="text/javascript">  
      jQuery(document).ready(function(){  
      $(pageInit);  
        var editor;  
    function pageInit()  
    {  
        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:{  
            msn:{name:'MSN',count:40,width:22,height:22,line:8},  
        },loadCSS:'<style>pre{margin-left:2em;border-left:3px solid #CCC;padding:0 1em;}</style>',shortcuts:{'ctrl+enter':submitForm}});  
    }  
      
    function submitForm(){$('#frmDemo').submit();}  
    });  
      </script>  
    </html>

有一些配置还是要说下：

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

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

第四步，写Action

package com.yctime.taste.web.Action;
    
    import java.io.File;
    import java.io.IOException;
    import java.io.PrintWriter;
    import java.util.UUID;
    
    import javax.servlet.http.HttpServletRequest;
    import javax.servlet.http.HttpServletResponse;
    
    import org.apache.commons.io.FileUtils;
    import org.apache.struts2.ServletActionContext;
    
    import com.opensymphony.xwork2.ActionContext;
    import com.opensymphony.xwork2.ActionSupport;
    
    public class ImgUploadAction extends ActionSupport {
    	
    	private File filedata;    
        private String filedataContentType;       
        private String filedataFileName;      
        private String err;    
        private String msg;    
        private String message;    
        private String fileExt = "jpg,jpeg,gif,bmp,png";        
            
       private HttpServletResponse response=ServletActionContext.getResponse(); 
      
    	public String upload()throws Exception{  
    		//System.out.println("before");
        String saveRealFilePath = ServletActionContext.getServletContext().getRealPath("/upload");   
        File fileDir = new File(saveRealFilePath);   
        if (!fileDir.exists()) {   
            fileDir.mkdirs();   
        }   
        File savefile;   
        String newFileName=UUID.randomUUID().toString()+filedataFileName.substring(filedataFileName.indexOf("."),filedataFileName.length());
        savefile = new File(saveRealFilePath + "/" + newFileName);
        FileUtils.copyFile(filedata,savefile);
        msg = "/Taste/upload/" + newFileName;   
        err="";   
        printInfo( err, msg);
        response.setContentType("text/html;charset=utf-8");
        PrintWriter out=response.getWriter();
        out.append(message);
        out.flush();
        out.close();
        System.out.println("message="+message);
        return "success";   
    }  
     public void printInfo(String err,String newFileName) {   
            message = "{\"err\":\"" + err + "\",\"msg\":\"" + newFileName   
                            + "\"}";             
     }
     
     
    
     public File getFiledata() {
    		return filedata;
    	}
    	public void setFiledata(File filedata) {
    		this.filedata = filedata;
    	}
    	public String getFiledataContentType() {
    		return filedataContentType;
    	}
    	public void setFiledataContentType(String filedataContentType) {
    		this.filedataContentType = filedataContentType;
    	}
    	public String getFiledataFileName() {
    		return filedataFileName;
    	}
    	public void setFiledataFileName(String filedataFileName) {
    		this.filedataFileName = filedataFileName;
    	}
    	public String getErr() {
    		return err;
    	}
    	public void setErr(String err) {
    		this.err = err;
    	}
    	public String getMsg() {
    		return msg;
    	}
    	public void setMsg(String msg) {
    		this.msg = msg;
    	}
    	public String getMessage() {
    		return message;
    	}
    	public void setMessage(String message) {
    		this.message = message;
    	}
    	public String getFileExt() {
    		return fileExt;
    	}
    	public void setFileExt(String fileExt) {
    		this.fileExt = fileExt;
    	}
     
     
    }

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

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

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

第五步，写struts.xml

<package name="build" extends="struts-default" namespace="/">
    		<action name="ImgUpload" method="upload" class="ImgUploadAction">
    		<result name="success">/WEB-INF/writerArtice.jsp</result>  
    		</action>
    	</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.要注意的是，上面的所有代码是基于我自己的项目的，所以在参考是要根据自己的项目，把路径，名称改改。不要盲目拷代码

最后：祝大家成功

[Center]: /images/20220731/8f54e423a8a74b9687793281d4cfb6c7.png
[Center 1]: /images/20220731/4d861895b0d74b1b8615811c1250da68.png
[Center 2]: /images/20220731/5231aac4f4d84ffc95e0e66a899d2790.png
[Center 3]: /images/20220731/ff72b5ab4dfa47b988e188c0c3a5ab95.png