ckeditor和ueditor那个好 CKEditor和UEditor使用比较

2024-02-27 00:08:03 278

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

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


	FckReader
	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);
		}
	}
}

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

ckeditor和ueditor那个好 CKEditor和UEditor使用比较

热门推荐

随机推荐