麻豆小视频在线观看_中文黄色一级片_久久久成人精品_成片免费观看视频大全_午夜精品久久久久久久99热浪潮_成人一区二区三区四区

首頁 > 網站 > 軟件應用 > 正文

ckeditor和ueditor那個好 CKEditor和UEditor使用比較

2024-09-06 19:17:02
字體:
來源:轉載
供稿:網友

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

有什么問題,歡迎各位指正。

發表評論 共有條評論
用戶名: 密碼:
驗證碼: 匿名發表
主站蜘蛛池模板: 黄色片网站免费在线观看 | 日美av在线| 亚洲视频观看 | 天天草天天爱 | 黄视频免费在线 | 免费观看一区二区三区视频 | 久草网在线 | 青青草华人在线 | 成人18网站| 精品国产一区二区三区四 | 欧美日韩亚洲精品一区二区三区 | 亚洲天堂成人在线观看 | 亚洲综合视频网 | 精品一区二区电影 | 宅男噜噜噜66国产免费观看 | 一级大黄毛片 | 黄色免费在线视频网站 | 黄色大片免费网站 | 视频一区二区三区视频 | 最新午夜综合福利视频 | 天天夜天天操 | 新久草在线视频 | 国产精品久久久久久久娇妻 | 一级毛片播放 | 久草在线免费资源站 | 国产精品国产成人国产三级 | 最新影院| 成年免费看 | 在线视频观看一区二区 | 亚洲成人欧美在线 | 国产精品午夜未成人免费观看 | 国产精品久久久久av | 免费黄色欧美视频 | 中文字幕在线观看二区 | 久久久久久久久久网站 | 欧美性生交大片 | 久久黄色影院 | 欧美综合在线观看 | 久久久无码精品亚洲日韩按摩 | 国产一区二区视频在线播放 | 成人羞羞网站入口 |