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); } } }
有什么问题,欢迎各位指正。