欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

ckeditor和ueditor那個(gè)好 CKEditor和UEditor使用比較

 更新時(shí)間：2017年03月23日 23:38:50   投稿：mdxy-dxy  
本來(lái)項(xiàng)目中使用CKEditor已經(jīng)做好了的富文本編輯器的功能，但是業(yè)務(wù)考慮到美觀性要求換成UEditor，所以就在這里總結(jié)下,需要的朋友可以參考下

CKEditor和UEditor使用比較

本來(lái)項(xiàng)目中使用CKEditor已經(jīng)做好了的富文本編輯器的功能，但是業(yè)務(wù)考慮到美觀性要求換成UEditor，所以就在這里總結(jié)下

先說(shuō)下使用這兩個(gè)不同插件的感想，我用的ueditor是1.4.3的版本：(ueditor API)

UEditor：ueditor更注重用戶體驗(yàn)，而且使用起來(lái)較ckeditor簡(jiǎn)單，但是ueditor在處理前后臺(tái)交互時(shí)相比于ckeditor稍顯麻煩
ckeditor：ckeditor不像ueditor，更多的方法需要自己去實(shí)現(xiàn)，但是畢竟是老牌富文本編輯器，如果之前有寫(xiě)過(guò)這些方法的話，集成ckeditor個(gè)人覺(jué)得還是比ueditor更方便簡(jiǎn)單。

CKEditor的使用

在jsp頁(yè)面下引入ckeditor下的ckeditor.js（當(dāng)然首先要引入jQuery.js,引入插件類(lèi)庫(kù)ckeditor-Java-core-3.5.3.jar）

<script type="text/javascript" src="${basePath}/js/ckeditor/ckeditor.js"></script>

//引入js后在textarea標(biāo)簽上添加一個(gè)richText=”true”這個(gè)屬性即可

<textarea name="wxChoiceInfo.infoTextConte" id="wxChoiceInfoInfoTextConte" richText="true" cols="110" rows="15"></textarea>

獲取ckeditor中的內(nèi)容

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類(lèi)源碼

//CkeditorUploadAction類(lèi)源碼
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"); 
			//對(duì)文件進(jìn)行校驗(yàn)
			if(upload==null || uploadContentType==null || uploadFileName==null){
				//out.print("<font color=\"red\" size=\"2\">*請(qǐng)選擇上傳文件</font>");
				String path = "";  
			  String alt_msg = "*請(qǐng)選擇上傳文件";  
			  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 = "*請(qǐng)選擇圖片文件格式（必須為.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 = "*請(qǐng)選擇上傳"+this.getFileSize()/(1000*1024)+"M以內(nèi)的圖片文件";  
			   out.print("<script type='text/javascript'>window.parent.CKEDITOR.tools.callFunction(" 
			       + callback  
			       + ", '" 
			       + path  
			       + "' , '" 
			       + alt_msg
			       + "');</script>");
				return null;
			}
			String imagePath = "";
			
			//imagePath路徑的設(shè)置
			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();
			}
			//將文件保存到項(xiàng)目目錄下
			InputStream is = new FileInputStream(upload);
			Date date = new Date(); // 獲得系統(tǒng)時(shí)間，用于生成文件名
			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();
			
			//設(shè)置返回“圖像”選項(xiàng)卡
			
			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 {
			//得到文件名稱(chēng)
			String imageName = request.getParameter("imageName");
			String foldType = request.getParameter("fold");
			String imagePath = "";
			
			//imagePath路徑的設(shè)置
			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);	//擴(kuò)展名
				//得到配置文件路徑
				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(); //創(chuàng)建輸出流
				   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>

再來(lái)看UEditor：

//引入相關(guān)的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頁(yè)面部分代碼：

<form action="<s:url value="/p2p/updateIProductServices.action"/>" method="post" id="form">
<tr id="proInvSerTr">
    	<th>投資服務(wù)流程 <input type="hidden" id="hidInvestProcess" name="productServices.investSerProcess"/></th>
    	<td>
    		<!-- 加載編輯器的容器 -->
  				 <script id="container" name="content" type="text/plain">${productServices.investSerProcess}</script>
  			<!-- 實(shí)例化編輯器 -->
  			<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();
}

說(shuō)了那么多，那使用ueditor怎么修改文件上次的路勁呢，在1.4.3版本下，找到ueditor\jsp\config.json文件

找到上次圖片配置項(xiàng)的"imageUrlPrefix": "/", /* 圖片訪問(wèn)路徑前綴 */ "imagePathFormat": "upload/image/{yyyy}{mm}{dd}/{time}{rand:6}" //這里是我改過(guò)了的上傳路徑

注意要修改imageUrlPrefix，因?yàn)榫庉嬈髦袌D片顯示路徑是imageUrlPrefix+imagePathFormat，如果不修改imageUrlPrefix圖片是不能正常顯示的，imagePathFormat這個(gè)上傳路徑是相對(duì)于服務(wù)器的相對(duì)路徑。

使用ueditor最主要的就是需要修改web.xml中得struts的過(guò)濾器了，這個(gè)項(xiàng)目的前臺(tái)要求全部使用.html結(jié)尾，如果不修改的話，struts就會(huì)把上傳的靜態(tài)頁(yè)面image.html當(dāng)成action去處理了會(huì)報(bào)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);
		}
	}
}

有什么問(wèn)題，歡迎各位指正。

相關(guān)文章

最新評(píng)論