• 企业400电话
  • 微网小程序
  • AI电话机器人
  • 电商代运营
  • 全 部 栏 目

    企业400电话 网络优化推广 AI电话机器人 呼叫中心 网站建设 商标✡知产 微网小程序 电商运营 彩铃•短信 增值拓展业务
    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);
    		}
    	}
    }

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

    您可能感兴趣的文章:
    • 常用的HTML富文本编译器UEditor、CKEditor、TinyMCE、HTMLArea、eWebEditor、KindEditor简介
    • Ueditor和CKeditor 两款编辑器的使用与配置方法
    上一篇:常用的HTML富文本编译器UEditor、CKEditor、TinyMCE、HTMLArea、eWebEditor、KindEditor简介
    下一篇:Ueditor和CKeditor 两款编辑器的使用与配置方法
  • 相关文章
  • 

    © 2016-2020 巨人网络通讯 版权所有

    《增值电信业务经营许可证》 苏ICP备15040257号-8

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