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）

 <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配置

 <action name="ck_upload" class="com.ccxe.wxdate.action.CkeditorUploadAction">
     <param name="fileSize">5120000param>
 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("*请选择上传文件");
                 String path = "";
                 String alt_msg = "*请选择上传文件";
                 out.print("window.parent.CKEDITOR.tools.callFunction("
                         + callback
                         + ", '"
                         + path
                         + "' , '"
                         + alt_msg
                         + "');");
                 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("alert(\"*文件格式不正确（必须为.jpg/.gif/.bmp/.png文件）\");return false;");
                  String path = "";
                  String alt_msg = "*请选择图片文件格式（必须为.jpg/.jpeg/.gif/.bmp/.png文件）";
                  out.print("window.parent.CKEDITOR.tools.callFunction("
                          + callback
                          + ", '"
                          + path
                          + "' , '"
                          + alt_msg
                          + "');");

                 return null;
             }

             if(upload.length() > this.getFileSize()){
                 //out.print("*文件大小不得大于"+this.getFileSize()/(1000*1024)+"m");
                  String path = "";
                  String alt_msg = "*请选择上传"+this.getFileSize()/(1000*1024)+"M以内的图片文件";
                  out.print("window.parent.CKEDITOR.tools.callFunction("
                          + callback
                          + ", '"
                          + path
                          + "' , '"
                          + alt_msg
                          + "');");
                 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("");
             out.println("window.parent.CKEDITOR.tools.callFunction(" + callback + ",'"+ callbackUrl + "','')");
             out.println("");
         } 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

 <servlet>
     <servlet-name>FckReaderservlet-name>
     <servlet-class>com.***.common.file.FckImageReaderServletservlet-class>
 servlet>
 <servlet-mapping>
    <servlet-name>FckReaderservlet-name>
    <url-pattern>/fckImageReader.servleturl-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">

jsp页面部分代码：

 <form action="/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就完成了初始化了，为啥前面授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，修改代码如下：

 <filter>
       <filter-name>struts2filter-name>
       <filter-class>com.***.***.filter.CommonFilterfilter-class>
       <init-param>
       <param-name>configparam-name>
       <param-value>../config/struts.xmlparam-value>
     init-param>
   filter>
   <filter-mapping>
       <filter-name>struts2filter-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);
         }
     }
 }

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