ckeditor和ueditor那个好 CKEditor和UEditor使用比较
CKEditor和UEditor使用比较
本来项目中使用CKEditor已经做好了的富文本编辑器的功能,但是业务考虑到美观性要求换成UEditor,所以就在这里总结下
先说下使用这两个不同插件的感想,我用的ueditor是1.4.3的版本:(ueditorAPI)
UEditor:ueditor更注重用户体验,而且使用起来较ckeditor简单,但是ueditor在处理前后台交互时相比于ckeditor稍显麻烦
ckeditor:ckeditor不像ueditor,更多的方法需要自己去实现,但是毕竟是老牌富文本编辑器,如果之前有写过这些方法的话,集成ckeditor个人觉得还是比ueditor更方便简单。
CKEditor的使用
在jsp页面下引入ckeditor下的ckeditor.js(当然首先要引入jQuery.js,引入插件类库ckeditor-Java-core-3.5.3.jar)
//引入js后在textarea标签上添加一个richText=”true”这个属性即可
获取ckeditor中的内容
Varcontent=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配置
5120000
CkeditorUploadAction类源码
//CkeditorUploadAction类源码 publicclassCkeditorUploadActionextendsActionSupport{ privatestaticfinallongserialVersionUID=1L; privateFileupload; privateStringuploadContentType; privateStringuploadFileName; //文件大小 privatelongfileSize; //取文件路径 privateStringfileType; publicStringgetFileType(){ returnfileType; } publicvoidsetFileType(StringfileType){ this.fileType=fileType; } publiclonggetFileSize(){ returnfileSize; } publicvoidsetFileSize(longfileSize){ this.fileSize=fileSize; } publicFilegetUpload(){ returnupload; } publicvoidsetUpload(Fileupload){ this.upload=upload; } publicStringgetUploadContentType(){ returnuploadContentType; } publicvoidsetUploadContentType(StringuploadContentType){ this.uploadContentType=uploadContentType; } publicStringgetUploadFileName(){ returnuploadFileName; } publicvoidsetUploadFileName(StringuploadFileName){ this.uploadFileName=uploadFileName; } publicStringexecute()throwsException{ try{ HttpServletResponseresponse=ServletActionContext.getResponse(); response.setContentType("text/html;charset=UTF-8"); PrintWriterout=response.getWriter(); Stringcallback=ServletActionContext.getRequest().getParameter("CKEditorFuncNum"); //对文件进行校验 if(upload==null||uploadContentType==null||uploadFileName==null){ //out.print("*请选择上传文件"); Stringpath=""; Stringalt_msg="*请选择上传文件"; out.print(" window.parent.CKEDITOR.tools.callFunction(" +callback +",'" +path +"','" +alt_msg +"');"); returnnull; } 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 }elseif((uploadContentType.equals("image/x-png")||uploadContentType.equals("image/png"))&&uploadFileName.substring(uploadFileName.length()-4).toLowerCase().equals(".png")){ }elseif(uploadContentType.equals("image/gif")&&uploadFileName.substring(uploadFileName.length()-4).toLowerCase().equals(".gif")){ }elseif(uploadContentType.equals("image/bmp")&&uploadFileName.substring(uploadFileName.length()-4).toLowerCase().equals(".bmp")){ }else{ //out.print(" alert(\"*文件格式不正确(必须为.jpg/.gif/.bmp/.png文件)\");returnfalse;"); Stringpath=""; Stringalt_msg="*请选择图片文件格式(必须为.jpg/.jpeg/.gif/.bmp/.png文件)"; out.print(" window.parent.CKEDITOR.tools.callFunction(" +callback +",'" +path +"','" +alt_msg +"');"); returnnull; } if(upload.length()>this.getFileSize()){ //out.print(" *文件大小不得大于"+this.getFileSize()/(1000*1024)+"m"); Stringpath=""; Stringalt_msg="*请选择上传"+this.getFileSize()/(1000*1024)+"M以内的图片文件"; out.print(" window.parent.CKEDITOR.tools.callFunction(" +callback +",'" +path +"','" +alt_msg +"');"); returnnull; } StringimagePath=""; //imagePath路径的设置 WebApplicationContextwac=ContextLoader.getCurrentWebApplicationContext(); WxConfigwxConfig=(WxConfig)wac.getBean("wxConfig"); //if(fileType.equals(PubParaConstants.DC_CK_UPLOAD_PATTH_PARAM.DC_CK_UPLOAD_PATTH_PARAM_PROSELECT)){ imagePath=wxConfig.getFilePath(); //} //WxConfigwxConfig; Filedirectory=newFile(imagePath); if(!directory.isDirectory()){ directory.mkdirs(); } //将文件保存到项目目录下 InputStreamis=newFileInputStream(upload); Datedate=newDate();//获得系统时间,用于生成文件名 longlTime=date.getTime(); StringfileName=DateUtil.toStringNoInterval(date,8)+"_"+lTime; fileName+=FileUtil.getFileSuffix(uploadFileName); FiletoFile=newFile(imagePath,fileName); OutputStreamos=newFileOutputStream(toFile); byte[]buffer=newbyte[1024]; intlength=0; while((length=is.read(buffer))>0){ os.write(buffer,0,length); } is.close(); os.close(); //设置返回“图像”选项卡 StringcallbackUrl=ServletActionContext.getRequest().getContextPath()+"/fckImageReader.servlet?fold="+this.getFileType()+"&imageName="+fileName; out.println(" "); out.println("window.parent.CKEDITOR.tools.callFunction("+callback+",'"+callbackUrl+"','')"); out.println(""); }catch(Exceptione){ e.printStackTrace(); } returnnull; } }
图片回显到编辑器的servlet代码
/** *文件流方式读取本地图片文件(图片回显处理) *FckImageReaderServlet */ publicclassFckImageReaderServletextendsHttpServlet{ privatestaticfinallongserialVersionUID=1L; publicvoidinit()throwsServletException{ } publicvoiddoGet(HttpServletRequestrequest,HttpServletResponseresponse){ this.doPost(request,response); } publicvoiddoPost(HttpServletRequestrequest,HttpServletResponseresponse){ try{ //得到文件名称 StringimageName=request.getParameter("imageName"); StringfoldType=request.getParameter("fold"); StringimagePath=""; //imagePath路径的设置 WebApplicationContextwac=ContextLoader.getCurrentWebApplicationContext(); WxConfigwxConfig=(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){ StringimageExt=imageName.substring(imageName.lastIndexOf(".")+1); //扩展名 //得到配置文件路径 StringimageDir=imagePath+"/"+imageName; //文件全局路径 FileinputFile=newFile(imageDir); if(inputFile.exists()){ //BufferedImageinput=ImageIO.read(inputFile); //禁止图像缓存。 response.setHeader("Pragma","no-cache"); response.setHeader("Cache-Control","no-cache"); response.setDateHeader("Expires",0); //response.setContentType("image/jpeg"); //将图像输出到Servlet输出流中。 // ServletOutputStreamsos=response.getOutputStream(); // ImageIO.write(input,imageExt,sos); // sos.flush(); // sos.close(); InputStreamin=newFileInputStream(inputFile); OutputStreamos=response.getOutputStream();//创建输出流 byte[]b=newbyte[1024]; while(in.read(b)!=-1){ os.write(b); } in.close(); os.flush(); os.close(); } } }catch(Exceptione){ e.printStackTrace(); } } }
web.xml
Web.xml配置FckImageReaderServletFckReader com.***.common.file.FckImageReaderServlet FckReader /fckImageReader.servlet
再来看UEditor:
//引入相关的js和css
jsp页面部分代码:
"method="post"id="form"> 投资服务流程 ${productServices.investSerProcess} varue=UE.getEditor('container'); functionsubmitForm(){ $("#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,修改代码如下:
struts2 com.***.***.filter.CommonFilter config ../config/struts.xml struts2 /*
filter的代码
publicclassCommonFilterextendsStrutsPrepareAndExecuteFilter{ @Override publicvoiddoFilter(ServletRequestreq,ServletResponseresp, FilterChainchain)throwsIOException,ServletException{ HttpServletRequestrequest=(HttpServletRequest)req; Stringurl=request.getRequestURI(); if(url.contains("/ueditor")){ chain.doFilter(req,resp); }else{ super.doFilter(req,resp,chain); } } }
有什么问题,欢迎各位指正。