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); } }}有什么問題，歡迎各位指正。
新聞熱點
疑難解答
