struts2 配置 xheditor

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


第一步,先看效果:


struts2 配置 xheditor_第1张图片


第二步,下载好xheditor插件

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

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

struts2 配置 xheditor_第2张图片


下好解压之后,是下图的模样:


struts2 配置 xheditor_第3张图片


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

(我把demo去掉了)


struts2 配置 xheditor_第4张图片


第三步,写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">  
<!-- 
<link rel="stylesheet" type="text/css" href="styles.css"> 
-->  
    <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>  

有一些配置还是要说下:

<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


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.要注意的是,上面的所有代码是基于我自己的项目的,所以在参考是要根据自己的项目,把路径,名称改改。不要盲目拷代码


最后:祝大家成功



你可能感兴趣的:(xheditor,jsp配置xheditor,java配置xheditor)