CKEditor和UEditor使用比较
本来项目中使用CKEditor已经做好了的富文本编辑器的功能，但是业务考虑到美观性要求换成UEditor，所以就在这里总结下
先说下使用这两个不同插件的感想，我用的ueditor是1.4.3的版本：(ueditor API)
CKEditor的使用
在jsp页面下引入ckeditor下的ckeditor.js（当然首先要引入jQuery.js,引入插件类库ckeditor-Java-core-3.5.3.jar）
<script type="text/javascript" src="${basePath}/js/ckeditor/ckeditor.js"></script>
//引入js后在textarea标签上添加一个richText=”true”这个属性即可
<textarea name="wxChoiceInfo.infoTextConte" id="wxChoiceInfoInfoTextConte" richText="true" cols="110" rows="15"></textarea>
获取ckeditor中的内容
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 }); }); });
Action配置
<!-- FckEdit上传--> <action name="ck_upload" class="com.ccxe.wxdate.action.CkeditorUploadAction"> <param name="fileSize"></param> <!-- 上传文件大小 --> </action>
CkeditorUploadAction类源码
//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;
}
}
图片回显到编辑器的servlet代码
/ * 文件流方式读取本地图片文件（图片回显处理） * 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
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>
再来看UEditor：
//引入相关的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" >
jsp页面部分代码：
<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(); }
说了那么多，那使用ueditor怎么修改文件上次的路劲呢，在1.4.3版本下，找到ueditor\jsp\config.json文件
找到上次图片配置项的"imageUrlPrefix": "/", /* 图片访问路径前缀 */ "imagePathFormat": "upload/image/{yyyy}{mm}{dd}/{time}{rand:6}" //这里是我改过了的上传路径
注意要修改imageUrlPrefix，因为编辑器中图片显示路径是imageUrlPrefix+imagePathFormat，如果不修改imageUrlPrefix图片是不能正常显示的，imagePathFormat这个上传路径是相对于服务器的相对路径。
使用ueditor最主要的就是需要修改web.xml中得struts的过滤器了，这个项目的前台要求全部使用.html结尾，如果不修改的话，struts就会把上传的静态页面image.html当成action去处理了会报404，修改代码如下：
<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>
filter的代码
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); } } }
有什么问题，欢迎各位指正。
您可能感兴趣的文章:
- 常用的HTML富文本编译器UEditor、CKEditor、TinyMCE、HTMLArea、eWebEditor、KindEditor简介
- Ueditor和CKeditor 两款编辑器的使用与配置方法
