CKEditor和UEditor使用比较

 

CKEditor和UEditor使用比较

本来项目中使用CKEditor已经做好了的富文本编辑器的功能，但是业务考虑到美观性要求换成UEditor，所以就在这里总结下

先说下使用这两个不同插件的感想，我用的ueditor是1.4.3的版本：(ueditor API)

UEditor：ueditor更注重用户体验，而且使用起来较ckeditor简单，但是ueditor在处理前后台交互时相比于ckeditor稍显麻烦

ckeditor：ckeditor不像ueditor，更多的方法需要自己去实现，但是毕竟是老牌富文本编辑器，如果之前有写过这些方法的话，集成ckeditor个人觉得还是比ueditor更方便简单。

CKEditor的使用

在jsp页面下引入ckeditor下的ckeditor.js（当然首先要引入jquery.js）

[html]  view plain copy

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

//引入js后在textarea标签上添加一个richText=”true”这个属性即可

[html]  view plain copy

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

[html]  view plain copy

1. 获取ckeditor中的内容  
2. Var content = CKEDITOR.instances.wxChoiceInfoInfoTextConte.getData(content);  
3.   
4. //初始化  
5.  $(function() {  
6. //富文本字段初始化  
7. $("[richText]").each(function (e) {   
8.     CKEDITOR.replace($(this).attr("id"),{     
9.      height : 400,  
10.     skin : 'kama',  
11.     language : 'zh-cn',  
12. filebrowserImageUploadUrl:'${basePath}/wxdate/ck_upload.action?fileType=1',  
13.     toolbar: 'ToolbarCommon',  
14.      resize_enabled: false  
15.     });  
16. });  
17. });  

[html]  view plain copy

1. Action配置  
2. <!-- FckEdit上传-->  
3. <action name="ck_upload" class="com.ccxe.wxdate.action.CkeditorUploadAction">  
4.     <param name="fileSize">5120000</param>  <!-- 上传文件大小 -->  
5. </action>  

[java]  view plain copy

1. //CkeditorUploadAction类源码  
2. public class CkeditorUploadAction extends ActionSupport {  
3.   
4.     private static final long serialVersionUID = 1L;  
5.     private File upload;  
6.     private String uploadContentType;  
7.     private String uploadFileName;  
8.     //文件大小  
9.     private long fileSize;  
10.     //取文件路径  
11.     private String fileType;  
12.       
13.     public String getFileType() {  
14.         return fileType;  
15.     }  
16.   
17.     public void setFileType(String fileType) {  
18.         this.fileType = fileType;  
19.     }  
20.   
21.     public long getFileSize() {  
22.         return fileSize;  
23.     }  
24.   
25.     public void setFileSize(long fileSize) {  
26.         this.fileSize = fileSize;  
27.     }  
28.   
29.     public File getUpload() {  
30.         return upload;  
31.     }  
32.   
33.     public void setUpload(File upload) {  
34.           
35.         this.upload = upload;  
36.     }  
37.   
38.     public String getUploadContentType() {  
39.         return uploadContentType;  
40.     }  
41.   
42.     public void setUploadContentType(String uploadContentType) {  
43.         this.uploadContentType = uploadContentType;  
44.     }  
45.   
46.     public String getUploadFileName() {  
47.         return uploadFileName;  
48.     }  
49.   
50.     public void setUploadFileName(String uploadFileName) {  
51.         this.uploadFileName = uploadFileName;   }  
52.   
53.     public String execute() throws Exception {  
54.         try {  
55.             HttpServletResponse response = ServletActionContext.getResponse();  
56.             response.setContentType("text/html;charset=UTF-8");  
57.             PrintWriter out = response.getWriter();  
58.               
59.             String callback = ServletActionContext.getRequest().getParameter("CKEditorFuncNum");   
60.             //对文件进行校验  
61.             if(upload==null || uploadContentType==null || uploadFileName==null){  
62.                 //out.print("<font color=\"red\" size=\"2\">*请选择上传文件</font>");  
63.                 String path = "";     
64.                 String alt_msg = "*请选择上传文件";     
65.                 out.print("<script type='text/javascript'>window.parent.CKEDITOR.tools.callFunction("    
66.                         + callback     
67.                         + ", '"    
68.                         + path     
69.                         + "' , '"    
70.                         + alt_msg     
71.                         + "');</script>");   
72.                 return null;  
73.             }  
74.             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"))) {  
75.                 //IE6上传jpg图片的headimageContentType是image/pjpeg，而IE9以及火狐上传的jpg图片是image/jpeg  
76.             }else if((uploadContentType.equals("image/x-png") || uploadContentType.equals("image/png")) && uploadFileName.substring(uploadFileName.length() - 4).toLowerCase().equals(".png")){  
77.                   
78.             }else if(uploadContentType.equals("image/gif") && uploadFileName.substring(uploadFileName.length() - 4).toLowerCase().equals(".gif")){  
79.                   
80.             }else if(uploadContentType.equals("image/bmp") && uploadFileName.substring(uploadFileName.length() - 4).toLowerCase().equals(".bmp")){  
81.                   
82.             }else{  
83.                 //out.print("<script language=\"javascript\">alert(\"*文件格式不正确（必须为.jpg/.gif/.bmp/.png文件）\");return false;</script>");  
84.                  String path = "";     
85.                  String alt_msg = "*请选择图片文件格式（必须为.jpg/.jpeg/.gif/.bmp/.png文件）";     
86.                  out.print("<script type='text/javascript'>window.parent.CKEDITOR.tools.callFunction("    
87.                          + callback     
88.                          + ", '"    
89.                          + path     
90.                          + "' , '"    
91.                          + alt_msg     
92.                          + "');</script>");     
93.   
94.                 return null;  
95.             }  
96.               
97.             if(upload.length() > this.getFileSize()){  
98.                 //out.print("<font color=\"red\" size=\"2\">*文件大小不得大于"+this.getFileSize()/(1000*1024)+"m</font>");  
99.                  String path = "";     
100.                  String alt_msg = "*请选择上传"+this.getFileSize()/(1000*1024)+"M以内的图片文件";     
101.                  out.print("<script type='text/javascript'>window.parent.CKEDITOR.tools.callFunction("    
102.                          + callback     
103.                          + ", '"    
104.                          + path     
105.                          + "' , '"    
106.                          + alt_msg  
107.                          + "');</script>");  
108.                 return null;  
109.             }  
110.             String imagePath = "";  
111.               
112.             //imagePath路径的设置  
113.             WebApplicationContext wac = ContextLoader.getCurrentWebApplicationContext();  
114.             WxConfig  wxConfig =  (WxConfig)wac.getBean("wxConfig");  
115.             //if(fileType.equals(PubParaConstants.DC_CK_UPLOAD_PATTH_PARAM.DC_CK_UPLOAD_PATTH_PARAM_PROSELECT)) {  
116.                 imagePath = wxConfig.getFilePath();  
117.             //}  
118.             //WxConfig wxConfig;  
119.             File directory = new File(imagePath);  
120.             if(!directory.isDirectory()) {  
121.                 directory.mkdirs();  
122.             }  
123.             //将文件保存到项目目录下  
124.             InputStream is = new FileInputStream(upload);  
125.             Date date = new Date(); // 获得系统时间，用于生成文件名  
126.             long lTime = date.getTime();  
127.             String fileName = DateUtil.toStringNoInterval(date, 8)+"_"+lTime;   
128.             fileName += FileUtil.getFileSuffix(uploadFileName);  
129.             File toFile = new File(imagePath, fileName);  
130.             OutputStream os = new FileOutputStream(toFile);     
131.             byte[] buffer = new byte[1024];     
132.             int length = 0;  
133.             while ((length = is.read(buffer)) > 0) {     
134.                 os.write(buffer, 0, length);     
135.             }     
136.             is.close();  
137.             os.close();  
138.               
139.             //设置返回“图像”选项卡  
140.               
141.             String callbackUrl  =  ServletActionContext.getRequest().getContextPath() +"/fckImageReader.servlet?fold="+this.getFileType()+"&imageName="+fileName;  
142.             out.println("<script type=\"text/javascript\">");    
143.             out.println("window.parent.CKEDITOR.tools.callFunction(" + callback + ",'"+ callbackUrl + "','')");    
144.             out.println("</script>");  
145.         } catch (Exception e) {  
146.             e.printStackTrace();  
147.         }  
148.         return null;  
149.     }  
150.       
151. }  

图片回显到编辑器的servlet代码

[java]  view plain copy

1. /** 
2.  * 文件流方式读取本地图片文件（图片回显处理） 
3.  * FckImageReaderServlet 
4.  */  
5. public class FckImageReaderServlet extends HttpServlet {  
6.       
7.     private static final long serialVersionUID = 1L;  
8.   
9.     public void init() throws ServletException {  
10.     }  
11.       
12.     public void doGet(HttpServletRequest request, HttpServletResponse response) {  
13.         this.doPost(request, response);  
14.     }  
15.       
16.     public void doPost(HttpServletRequest request, HttpServletResponse response) {  
17.         try {  
18.             //得到文件名称  
19.             String imageName = request.getParameter("imageName");  
20.             String foldType = request.getParameter("fold");  
21.             String imagePath = "";  
22.               
23.             //imagePath路径的设置  
24.             WebApplicationContext wac = ContextLoader.getCurrentWebApplicationContext();  
25.             WxConfig  wxConfig =  (WxConfig)wac.getBean("wxConfig");//模块配置文件  
26.             //if(fileType.equals(PubParaConstants.DC_CK_UPLOAD_PATTH_PARAM.DC_CK_UPLOAD_PATTH_PARAM_PROSELECT)) {  
27.                 imagePath = wxConfig.getFilePath();  
28.             //}  
29.             if (imageName != null) {  
30.                 String imageExt = imageName.substring(imageName.lastIndexOf(".") + 1);  //扩展名  
31.                 //得到配置文件路径  
32.                 String imageDir = imagePath+"/"+imageName;  //文件全局路径  
33.                   
34.                 File inputFile = new File(imageDir);  
35.                 if (inputFile.exists()) {  
36.                     //BufferedImage input = ImageIO.read(inputFile);  
37.                     // 禁止图像缓存。  
38.                     response.setHeader("Pragma", "no-cache");  
39.                     response.setHeader("Cache-Control", "no-cache");  
40.                     response.setDateHeader("Expires", 0);  
41.                     //response.setContentType("image/jpeg");  
42.                     // 将图像输出到Servlet输出流中。  
43. //                  ServletOutputStream sos = response.getOutputStream();  
44. //                  ImageIO.write(input, imageExt, sos);  
45. //                  sos.flush();  
46. //                  sos.close();  
47.                      InputStream in = new FileInputStream(inputFile);  
48.                      OutputStream os = response.getOutputStream();  //创建输出流  
49.                      byte[] b = new byte[1024];    
50.                      while( in.read(b)!= -1){    
51.                       os.write(b);       
52.                      }  
53.                      in.close();   
54.                      os.flush();  
55.                      os.close();  
56.                 }  
57.             }   
58.         } catch (Exception e) {  
59.             e.printStackTrace();  
60.         }  
61.     }  
62. }  

web.xml

[html]  view plain copy

1. Web.xml配置FckImageReaderServlet  
2. <!-- FCK -->  
3. <servlet>   
4.     <servlet-name>FckReader</servlet-name>   
5.     <servlet-class>com.***.common.file.FckImageReaderServlet</servlet-class>   
6. </servlet>  
7. <servlet-mapping>  
8.    <servlet-name>FckReader</servlet-name>  
9.    <url-pattern>/fckImageReader.servlet</url-pattern>  
10. </servlet-mapping>  

再来看UEditor：

[html]  view plain copy

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

jsp页面部分代码：

[html]  view plain copy

1. <form action="<s:url value="/p2p/updateIProductServices.action"/>" method="post" id="form">  
2. <tr id="proInvSerTr">  
3.             <th>投资服务流程 <input type="hidden" id="hidInvestProcess" name="productServices.investSerProcess"/></th>  
4.             <td>  
5.                 <!-- 加载编辑器的容器 -->  
6.                  <script id="container" name="content" type="text/plain">${productServices.investSerProcess}</script>  
7.                 <!-- 实例化编辑器 -->  
8.                 <script type="text/javascript">  
9.                     var ue = UE.getEditor('container');  
10.                  </script>  
11.             </td>  
12.         </tr>  
13. <input type="button" value="保存" class="ImgButton"  onclick="submitForm"/>  
14. </form>  
15. <script type="text/javascript">  
16. function submitForm(){  
17.     $("#hidInvestProcess").val(ue.getContent());  
18.   $("#form").submit();  
19. }  

</script>

这样Ueditor就完成了初始化了，为啥前面授ueditor在前后台交互上要比ckeditor复杂呢，就是因为ckeditor可以直接给textarea加上name属性，提交表单时可以直接注入，而ueditor则必须通过隐藏域传值（暂时没有想到其他的方法，当然ajax提交表单肯定肯定是可以的），所以要比ckeditor多了一步，但是ueditor已经帮我们实现了上次的方法，所以这里ueditor又比ckeditor更方便。

说了那么多，那使用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，修改代码如下：

[html]  view plain copy

1. <filter>  
2.       <filter-name>struts2</filter-name>  
3.       <filter-class>com.***.***.filter.CommonFilter</filter-class>  
4.       <init-param>  
5.       <param-name>config</param-name>  
6.       <param-value>../config/struts.xml</param-value>  
7.     </init-param>  
8.   </filter>  
9.   <filter-mapping>  
10.       <filter-name>struts2</filter-name>  
11.       <url-pattern>/*</url-pattern>  
12.   </filter-mapping>  

filter的代码

[java]  view plain copy

1. public class CommonFilter extends StrutsPrepareAndExecuteFilter{  
2.   
3.     @Override  
4.     public void doFilter(ServletRequest req, ServletResponse resp,  
5.             FilterChain chain) throws IOException, ServletException {  
6.         HttpServletRequest request = (HttpServletRequest)req;  
7.         String url = request.getRequestURI();  
8.         if(url.contains("/ueditor")){  
9.             chain.doFilter(req, resp);  
10.         }else{  
11.             super.doFilter(req, resp, chain);  
12.         }  
13.     }  
14. }  

有什么问题，欢迎各位指正。