ckeditor和ueditor那个好 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,引入插件类库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">5120000</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);
		}
	}
}

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