这两天要做一个业务需要使用富文本编辑器，以前用的是重量级的Fckeditor，功能太多，所以需求要求要一个轻量级的编辑器，可以上传图片和文字的简单排版即可。于是，在百度寻寻觅觅，觉得xheditor编辑器（就是csdn，我现在正在写博客的编辑器）不错。可当我在百度找配置时（struts2配置xheditor），相关的资料只有几篇博客。还写得很精简，反正我导入是有错误的，而且写得又不全...不禁感慨，在java的世界里，居然没有一个傻瓜式的配置。经过我一天的研究（在前人的基础上），终于在刚才成功配置了。现在，为了造福广大后人，我决定写下这篇博客。开始吧：
第一步，先看效果：
第二步，下载好xheditor插件
这是官网：http://xheditor.com/download
我下的是下面图中第2个：1.1.14版本的
下好解压之后，是下图的模样：
然后到myeclipse的项目的web-root目录下，将一个文件夹：xheditor ,把上面的文件拷进去，如下：
（我把demo去掉了）
第三步，写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.要注意的是，上面的所有代码是基于我自己的项目的，所以在参考是要根据自己的项目，把路径，名称改改。不要盲目拷代码
最后：祝大家成功
4948
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
