欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2022-06-16 19:46:15
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);
		}
	}
}

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

相关标签: CKEditor UEditor