ckeditor和ueditor的使用方法对比

<script type="text/javascript" src="${basePath}/js/ckeditor/ckeditor.js"></script>

<textarea name="wxChoiceInfo.infoTextConte" id="wxChoiceInfoInfoTextConte" richText="true" cols="110" rows="15"></textarea>

Var content = CKEDITOR.instances.wxChoiceInfoInfoTextConte.getData(content);

//初始化
 $(function() {
//富文本字段初始化
$("[richText]").each(function (e) {
CKEDITOR.replace($(this).attr("id"),{
 height : 400,
skin : 'kama',
language : 'zh-cn',
filebrowserImageUploadUrl:'${basePath}/wxdate/ck_upload.action?fileType=1',
toolbar: 'ToolbarCommon',
 resize_enabled: false
});
});
});

<!-- FckEdit上传-->
<action name="ck_upload" class="com.ccxe.wxdate.action.CkeditorUploadAction">
<param name="fileSize">5120000</param> <!-- 上传文件大小 -->
</action>

//CkeditorUploadAction类源码
public class CkeditorUploadAction extends ActionSupport {

private static final long serialVersionUID = 1L;
private File upload;
private String uploadContentType;
private String uploadFileName;
//文件大小
private long fileSize;
//取文件路径
private String fileType;

public String getFileType() {
return fileType;
}

public void setFileType(String fileType) {
this.fileType = fileType;
}

public long getFileSize() {
return fileSize;
}

public void setFileSize(long fileSize) {
this.fileSize = fileSize;
}

public File getUpload() {
return upload;
}

public void setUpload(File upload) {

this.upload = upload;
}

public String getUploadContentType() {
return uploadContentType;
}

public void setUploadContentType(String uploadContentType) {
this.uploadContentType = uploadContentType;
}

public String getUploadFileName() {
return uploadFileName;
}

public void setUploadFileName(String uploadFileName) {
this.uploadFileName = uploadFileName;}

public String execute() throws Exception {
try {
HttpServletResponse response = ServletActionContext.getResponse();
response.setContentType("text/html;charset=UTF-8");
PrintWriter out = response.getWriter();

String callback = ServletActionContext.getRequest().getParameter("CKEditorFuncNum"); 
//对文件进行校验
if(upload==null || uploadContentType==null || uploadFileName==null){
//out.print("<font color=\"red\" size=\"2\">*请选择上传文件</font>");
String path = ""; 
 String alt_msg = "*请选择上传文件"; 
 out.print("<script type='text/javascript'>window.parent.CKEDITOR.tools.callFunction(" 
   + callback 
   + ", '" 
   + path 
   + "' , '" 
   + alt_msg 
   + "');</script>"); 
return null;
}
if ((uploadContentType.equals("image/pjpeg") || uploadContentType.equals("image/jpeg")) && (uploadFileName.substring(uploadFileName.length() - 4).toLowerCase().equals(".jpg")||uploadFileName.substring(uploadFileName.length() - 5).toLowerCase().equals(".jpeg"))) {
//IE6上传jpg图片的headimageContentType是image/pjpeg，而IE9以及火狐上传的jpg图片是image/jpeg
}else if((uploadContentType.equals("image/x-png") || uploadContentType.equals("image/png")) && uploadFileName.substring(uploadFileName.length() - 4).toLowerCase().equals(".png")){

}else if(uploadContentType.equals("image/gif") && uploadFileName.substring(uploadFileName.length() - 4).toLowerCase().equals(".gif")){

}else if(uploadContentType.equals("image/bmp") && uploadFileName.substring(uploadFileName.length() - 4).toLowerCase().equals(".bmp")){

}else{
//out.print("<script language=\"javascript\">alert(\"*文件格式不正确（必须为.jpg/.gif/.bmp/.png文件）\");return false;</script>");
 String path = ""; 
  String alt_msg = "*请选择图片文件格式（必须为.jpg/.jpeg/.gif/.bmp/.png文件）"; 
  out.print("<script type='text/javascript'>window.parent.CKEDITOR.tools.callFunction(" 
    + callback 
    + ", '" 
    + path 
    + "' , '" 
    + alt_msg 
    + "');</script>"); 

return null;
}

if(upload.length() > this.getFileSize()){
//out.print("<font color=\"red\" size=\"2\">*文件大小不得大于"+this.getFileSize()/(1000*1024)+"m</font>");
 String path = ""; 
  String alt_msg = "*请选择上传"+this.getFileSize()/(1000*1024)+"M以内的图片文件"; 
  out.print("<script type='text/javascript'>window.parent.CKEDITOR.tools.callFunction(" 
    + callback 
    + ", '" 
    + path 
    + "' , '" 
    + alt_msg
    + "');</script>");
return null;
}
String imagePath = "";

//imagePath路径的设置
WebApplicationContext wac = ContextLoader.getCurrentWebApplicationContext();
WxConfig wxConfig = (WxConfig)wac.getBean("wxConfig");
//if(fileType.equals(PubParaConstants.DC_CK_UPLOAD_PATTH_PARAM.DC_CK_UPLOAD_PATTH_PARAM_PROSELECT)) {
imagePath = wxConfig.getFilePath();
//}
//WxConfig wxConfig;
File directory = new File(imagePath);
if(!directory.isDirectory()) {
directory.mkdirs();
}
//将文件保存到项目目录下
InputStream is = new FileInputStream(upload);
Date date = new Date(); // 获得系统时间，用于生成文件名
long lTime = date.getTime();
String fileName = DateUtil.toStringNoInterval(date, 8)+"_"+lTime; 
fileName += FileUtil.getFileSuffix(uploadFileName);
File toFile = new File(imagePath, fileName);
OutputStream os = new FileOutputStream(toFile); 
byte[] buffer = new byte[1024]; 
int length = 0;
while ((length = is.read(buffer)) > 0) { 
 os.write(buffer, 0, length); 
} 
is.close();
os.close();

//设置返回“图像”选项卡

String callbackUrl = ServletActionContext.getRequest().getContextPath() +"/fckImageReader.servlet?fold="+this.getFileType()+"&imageName="+fileName;
out.println("<script type=\"text/javascript\">"); 
out.println("window.parent.CKEDITOR.tools.callFunction(" + callback + ",'"+ callbackUrl + "','')"); 
out.println("</script>");
} catch (Exception e) {
e.printStackTrace();
}
return null;
}

}

/**
 * 文件流方式读取本地图片文件（图片回显处理）
 * FckImageReaderServlet
 */
public class FckImageReaderServlet extends HttpServlet {

private static final long serialVersionUID = 1L;

public void init() throws ServletException {
}

public void doGet(HttpServletRequest request, HttpServletResponse response) {
this.doPost(request, response);
}

public void doPost(HttpServletRequest request, HttpServletResponse response) {
try {
//得到文件名称
String imageName = request.getParameter("imageName");
String foldType = request.getParameter("fold");
String imagePath = "";

//imagePath路径的设置
WebApplicationContext wac = ContextLoader.getCurrentWebApplicationContext();
WxConfig wxConfig = (WxConfig)wac.getBean("wxConfig");//模块配置文件
//if(fileType.equals(PubParaConstants.DC_CK_UPLOAD_PATTH_PARAM.DC_CK_UPLOAD_PATTH_PARAM_PROSELECT)) {
imagePath = wxConfig.getFilePath();
//}
if (imageName != null) {
String imageExt = imageName.substring(imageName.lastIndexOf(".") + 1);//扩展名
//得到配置文件路径
String imageDir = imagePath+"/"+imageName;//文件全局路径

File inputFile = new File(imageDir);
if (inputFile.exists()) {
//BufferedImage input = ImageIO.read(inputFile);
// 禁止图像缓存。
response.setHeader("Pragma", "no-cache");
response.setHeader("Cache-Control", "no-cache");
response.setDateHeader("Expires", 0);
//response.setContentType("image/jpeg");
// 将图像输出到Servlet输出流中。
//ServletOutputStream sos = response.getOutputStream();
//ImageIO.write(input, imageExt, sos);
//sos.flush();
//sos.close();
 InputStream in = new FileInputStream(inputFile);
 OutputStream os = response.getOutputStream(); //创建输出流
  byte[] b = new byte[1024]; 
  while( in.read(b)!= -1){ 
  os.write(b);  
  }
  in.close(); 
  os.flush();
  os.close();
}
} 
} catch (Exception e) {
e.printStackTrace();
}
}
}

Web.xml配置FckImageReaderServlet
<!-- FCK -->
<servlet> 
<servlet-name>FckReader</servlet-name> 
<servlet-class>com.***.common.file.FckImageReaderServlet</servlet-class> 
</servlet>
<servlet-mapping>
 <servlet-name>FckReader</servlet-name>
 <url-pattern>/fckImageReader.servlet</url-pattern>
</servlet-mapping>

//引入相关的js和css
 <script type="text/javascript" src="${basePath}/js/ueditor/ueditor.config.js"></script>
<script type="text/javascript" src="${basePath}/js/ueditor/ueditor.all.js"></script>
<link type="text/css" rel="stylesheet" href="${basePath}/js/ueditor/themes/default/css/ueditor.css" rel="external nofollow" >

<form action="<s:url value="/p2p/updateIProductServices.action"/>" method="post" id="form">
<tr id="proInvSerTr">
  <th>投资服务流程 <input type="hidden" id="hidInvestProcess" name="productServices.investSerProcess"/></th>
  <td>
  <!-- 加载编辑器的容器 -->
  <script id="container" name="content" type="text/plain">${productServices.investSerProcess}</script>
 <!-- 实例化编辑器 -->
 <script type="text/javascript">
  var ue = UE.getEditor('container');
  </script>
  </td>
  </tr>
<input type="button" value="保存" class="ImgButton" onclick="submitForm"/>
</form>
<script type="text/javascript">
function submitForm(){
 $("#hidInvestProcess").val(ue.getContent());
 $("#form").submit();
}

<filter>
  <filter-name>struts2</filter-name>
  <filter-class>com.***.***.filter.CommonFilter</filter-class>
  <init-param>
  <param-name>config</param-name>
  <param-value>../config/struts.xml</param-value>
 </init-param>
 </filter>
 <filter-mapping>
  <filter-name>struts2</filter-name>
  <url-pattern>/*</url-pattern>
 </filter-mapping>

public class CommonFilter extends StrutsPrepareAndExecuteFilter{

@Override
public void doFilter(ServletRequest req, ServletResponse resp,
FilterChain chain) throws IOException, ServletException {
HttpServletRequest request = (HttpServletRequest)req;
String url = request.getRequestURI();
if(url.contains("/ueditor")){
chain.doFilter(req, resp);
}else{
super.doFilter(req, resp, chain);
}
}
}