Liferay中整合tinyMCE詳解

摘要:

　　    最近在使用Liferay開發一個門戶網站的過程中碰到默認的在線文章編輯器無法滿足用戶需求的問題。Liferay默認的文章編輯器功能比較簡單，且可擴展性較差。經過再三權衡，決定采用tinyMCE作為Liferay的默認在線文章編輯器。但是，官方下載的tinyMCE的advimage插件不具有圖片上傳的功能，需要對該插件進行擴展。經過反復琢磨，終於解決了以上的問題。現在把解決方法寫出來，希望能給有需要的網友一點幫助。

　　   最近在使用Liferay開發一個門戶網站的過程中碰到默認的在線文章編輯器無法滿足用戶需求的問題。Liferay默認的文章編輯器功能比較簡單，且可擴展性較差。經過再三權衡，決定采用tinyMCE作為Liferay的默認在線文章編輯器。但是，官方下載的tinyMCE的advimage插件不具有圖片上傳的功能，需要對該插件進行擴展。經過反復琢磨，終於解決了以上的問題。現在把解決方法寫出來，希望能給有需要的網友一點幫助。
　　
　　    需要注重的是早期的liferay-3.6.1集成tinyMCE存在問題，在IE浏覽器環境下不能正確顯示編輯器，顯示“timyMCE為定義”錯誤。在Firefox浏覽器下可以正確顯示，但是頁面初始化時非常慢。經過很多嘗試這些問題忍讓沒有解決，估計問題與Liferay的頁面緩存有關。另外在liferay-3.6.1環境下上傳圖片時會出現圖片文件大小發生變化，且文件被破壞的問題。Liferay的更新版本已經發布，且以上存在的問題可能與Liferay本身的實現機制有關，解決這些問題可能比較棘手（呵呵，假如哪位大俠知道還望不吝賜教啊！），因此實現中使用的軟件版本如下：
　　  tinyMCE：tinymce_2_0_8
　　   Liferay：liferay-portal-tomcat-4.1.2
　　
　　  在使用tinyMCE前先解決tinyMCE的中文化以及中文字體的使用問題。
　　
　　版權聲明：任何獲得Matrix授權的網站，轉載時請務必保留以下作者信息和鏈接
　　作者:李樂鑫
　　原文:http://www.matrix.org.cn/resource/article/2006-11-19/Liferay+tinyMCE_c6b2d4d0-7771-11db-bdce-bdc029e475a1.Html
　　要害字:Liferay;tinyMCE
　　
　　（一）tinyMCE的中文化以及中文字體
　　    中文化方法：
　　    tinyMCE的中文化問題解決非常簡單。首先到tinyMCE的官方下載中文語言包tinymce_lpackage_zh-cn.jar，並將其解壓（假設解壓後的路徑為{$LANGUAGE_PATH}）。然後將解壓後的{$LANGUAGE_PATH} inymcejscripts iny_mce目錄下的所有文件復制到liferay安裝路徑（假設liferay的安裝路徑為{$LIFERAY_HOME}）的/webapps/ROOT/html/js/editor/tinymce目錄下，修改該路徑下的timymce.jsp，在tynyMCE.init中增加配置項 language : "zh_cn"。
　　
　　    中文字體設置方法：
　　    默認情況下，tinyMCE編輯工具欄的字體下拉框中沒有中文字體，需要在下拉框中增加需要的中文字體。修改方法如下，分別修改{$LIFERAY_HOME}/webapps/ROOT /html/ js/editor/ tinymce/themes/  目錄下的兩個子目錄advanced和simple目錄下的editor_template.js。在var iFonts='…'和var nFonts='…'中增加中文字體，如增加“宋體=宋體;方正姚體=方正姚體”等。
　　
　　（二）集成Liferay和tinyMCE
　　     1．下載tinymce_2_0_8.zip，並解壓（假設解壓目錄為{$TINYMCE_PATH}）。然後將解壓後的文件夾{$TINYMCE_PATH} inymcejscripts iny_mce復制到{$LIFERAY_HOME} webappsROOThtmljseditor下，並改名為tinymce；
　　    2． 設置Liferay應用的默認html編輯器為tinymce；（可以修改配置文件system.properties或直接修改{$LIFERAY_HOME}webappsROOThtmljseditoreditor.jsp）； 修改後的editor.jsp如下：  
　　
　　

<%@ page import="com.liferay.portal.util.Constants" %>
　　<%@ page import="com.liferay.portal.util.PropsUtil" %>
　　<%@ page import="com.liferay.util.BrowserSniffer" %>
　　<%@ page import="com.liferay.util.ParamUtil" %>
　　<%
　　
　　
             
            String editorImpl = "simple";
　　if (BrowserSniffer.is_rtf(request)) {
　　 editorImpl = ParamUtil.get(request, "editorImpl", PropsUtil.get(EDITOR_WYSIWYG_IMPL_KEY));
　　}
　　//editorImpl = "fckeditor";
　　//editorImpl = "liferay";
　　//editorImpl = "simple";
　　editorImpl = "tinymce";
　　// Resin won't allow dynamic content inside the jsp:include tag
　　RequestDispatcher rd = application.getRequestDispatcher(Constants.TEXT_HTML_DIR + 
　　"/js/editor/" + editorImpl + ".jsp");
　　rd.include(request, response);
　　%>
　　<%--<jsp:include page='<%= Constants.TEXT_HTML_DIR + "/js/editor/" + editorImpl + ".jsp" %>' />--%>

QQread.com 推出各大專業服務器評測 Linux服務器的安全性能 SUN服務器 HP服務器 DELL服務器 IBM服務器 聯想服務器 浪潮服務器 曙光服務器 同方服務器 華碩服務器 寶德服務器

　　
　　
　　（三）為tinyMCE增加圖片上傳功能
　　      本實現采用Struts實現圖片的上傳。 步驟如下：
　　    1．編寫文件上傳類。代碼清單如下：
　　     FileUploadAction.Java代碼清單如下：
　　    

package com.family.fileupload.web.action;
　　      import java.util.Calendar;
　　      import java.util.Date;
　　      import javax.servlet.http.HttpServletRequest;
　　      import javax.servlet.http.HttpServletResponse;
　　      import org.apache.struts.action.ActionForm;
　　      import org.apache.struts.action.ActionForward;
　　      import org.apache.struts.action.ActionMapping;
　　      import org.apache.struts.actions.DispatchAction;
　　      import com.family.fileupload.web.form.FileUploadForm;
　　      import com.family.fileupload.web.utils.FileUpload;
　　      public class FileUploadAction extends DispatchAction {
　　      public ActionForward uploadImage(ActionMapping mapping, ActionForm form,
　　          HttpServletRequest request, HttpServletResponse response) throws Exception {
　　          FileUploadForm uploadForm = (FileUploadForm) form;
　　          FileUpload fu = new FileUpload(uploadForm.getFile());
　　
　　
             
                      String realPath = this.getRealPath("/pictures");
　　          String fileName = this.getFileKeyRule() + "." + fu.getExtendName().toLowerCase();
　　          String filePath = realPath + "/" + fileName;
　　          fu.saveToFile(filePath);
　　          request.setAttribute("fileUrl", this.getRootUrl(request) + "/pictures/" + fileName);
　　          return mapping.findForward("image.sUCcess");
　　      } 
　　      private String getRootUrl(HttpServletRequest request) {
　　          StringBuffer buf = request.getRequestURL();
　　          int length = request.getRequestURI().length();
　　          buf.delete(buf.length() - length, buf.length());
　　          return buf.toString();
　　      }
　　      private String getRealPath(String floder) {
　　          return this.getServlet().getServletConfig().getServletContext().getRealPath(floder);
　　     }
　　     private String getFileKeyRule() {
　　          Calendar cal = Calendar.getInstance();
　　          cal.setTime(new Date());
　　          int iYear = cal.get(Calendar.YEAR);
　　          int iMonth = cal.get(Calendar.MONDAY) + 1;
　　          int iDay = cal.get(Calendar.DAY_OF_MONTH);
　　          int iHour = cal.get(Calendar.HOUR_OF_DAY);
　　          int iMinute = cal.get(Calendar.MINUTE);
　　          int iSecond = cal.get(Calendar.SECOND);
　　          StringBuffer strKey = new StringBuffer(15);
　　          strKey.append(iYear);
　　          if (iMonth < 10) {
　　              strKey.insert(4, '0');
　　              strKey.insert(5, iMonth);
　　
　　
             
                      } else {
　　              strKey.insert(4, iMonth);
　　          }
　　          if (iDay < 10) {
　　              strKey.insert(6, '0');
　　              strKey.insert(7, iDay);
　　          } else {
　　              strKey.insert(6, iDay);
　　          }
　　          if (iHour < 10) {
　　              strKey.insert(8, '0');
　　              strKey.insert(9, iHour);
　　          } else {
　　              strKey.insert(8, iHour);
　　          }
　　          if (iMinute < 10) {
　　              strKey.insert(10, '0');
　　              strKey.insert(11, iMinute);
　　          } else {
　　              strKey.insert(10, iMinute);
　　          }
　　          if (iSecond < 10) {
　　              strKey.insert(12, '0');
　　              strKey.insert(13, iSecond);
　　          } else {
　　              strKey.insert(12, iSecond);
　　          }
　　           return strKey.toString();
　　       }
　　   }

　　
　　
　　    FileUploadForm.java代碼清單如下：
　　
　　

   package com.family.fileupload.web.form;
　　      import org.apache.struts.action.ActionForm;
　　      import org.apache.struts.upload.FormFile;
　　      public class FileUploadForm extends ActionForm {
　　
　　
             
                      private static final long serialVersionUID = 1L;
　　          private FormFile file = null;
　　          public FormFile getFile() {
　　               return file;
　　          }
　　          public void setFile(FormFile file) {
　　               this.file = file;
　　          }
　　     }

　　
　　
　　 

QQread.com 推出各大專業服務器評測 Linux服務器的安全性能 SUN服務器 HP服務器 DELL服務器 IBM服務器 聯想服務器 浪潮服務器 曙光服務器 同方服務器 華碩服務器 寶德服務器

　　     FileUpload.java代碼清單如下：
　　  

package com.family.fileupload.web.utils;
　　     import java.io.FileNotFoundException;
　　     import java.io.FileOutputStream;
　　     import java.io.IOException;
　　     import java.io.InputStream;
　　     import java.io.OutputStream;
　　     import org.apache.struts.upload.FormFile;
　　     public class FileUpload {
　　         private FormFile file;
　　         private int fileSize;
　　         private String fileName;
　　         private String extendName;
　　         private String contentType;
　　         public FileUpload (FormFile file) {
　　           this.file = file;
　　           fileName = this.file.getFileName();
　　           fileSize = this.file.getFileSize();
　　           contentType = this.file.getContentType();
　　           int position = this.file.getFileName().indexOf(".");
　　           extendName = this.file.getFileName().substring(position + 1, 
　　                        this.file.getFileName().length());
　　      }
　　      public void saveToFile(String fileName) {
　　          try {
　　            InputStream is = this.file.getInputStream();
　　            int bytesRead = 0;
　　
　　
             
                        byte[] buffer = new byte[8912];
　　            OutputStream os = new FileOutputStream(fileName);
　　            while ((bytesRead = is.read(buffer, 0, 8912)) != -1) {
　　                 os.write(buffer, 0, bytesRead);
　　            }
　　            is.close();
　　            os.close();
　　           } catch (FileNotFoundException e) {
　　                e.printStackTrace();
　　           } catch (IOException e) {
　　                e.printStackTrace();
　　           }
　　      }
　　      public String getContentType() {
　　       return contentType;
　　      }
　　      public String getExtendName() {
　　           return extendName;
　　      }
　　      public FormFile getFile() {
　　           return file;
　　      }
　　      public String getFileName() {
　　           return fileName;
　　      }
　　      public int getFileSize() {
　　           return fileSize;
　　      }}
　　

　　    
　　
　　2．將以上文件編譯後打包成 upload.jar，並發布到Liferay應用的包路徑下（{$LIFERAY_HOME}/webapps/ROOT/WEB-INF/lib）；
　　
　　3．編寫upload.jsp並復制到liferay應用的的{$LIFERAY_HOME}/webapps/ROOThtmljseditor tinymce pluginsadvimage目錄下；
　　
　　Upload.jsp的代碼清單如下：  
　　

     <form action="/c/portal/fileUpload？method=uploadImage" 
　　           method="post" enctype="multipart/form-data">
　　       <input type="file" name="file">
　　       <input type="submit">
　　     </form> 

　　
　　
　　4．編寫imagePath.jsp並復制到webappsROOThtml下；
　　代碼清單如下：
　　

 <script>   
　　    function insertImage() {   
　　
　　
             
                  var imageUrl = '<%=(String) request.getAttribute("fileUrl")%>'; 
　　      if (imageUrl != '') {
　　       opener.document.all("src").value = imageUrl;
　　       window.close();
　　      }
　　   }
　　  </script>

　　
　　
　　5． 在tinymce.jsp中增加如下代碼
　　

   */
　　   function fileBrowserCallBack(field_name, url, type, win) {    
　　     //打開文件上傳窗口
　　     win.open("upload.jsp");   
　　   }

　　
　　
　　6． 在liferay的配置文件struts-config.XML或struts-config-ext.xml文件中增加如下配置：
　　增加formbean配置：
　　

 <form-beans>
　　     ......
　　     <form-bean name="fileUploadForm" 
　　     type="com.family.fileupload.web.form.FileUploadForm" />
　　 </form-beans>

　　
　　
　　增加action配置：
　　

 <action-mappings>
　　     ……
　　     <action
　　           name="fileUploadForm"
　　           path="/portal/fileUpload"
　　           scope="request"
　　           type="com.family.fileupload.web.action.FileUploadAction"
　　           parameter="method">
　　       <forward name="file.success" path="/filePath.jsp"/>
　　       <forward name="image.success" path="/imagePath.jsp"/>
　　    </action>
　　 </action-mappings>

　　
　　
　　   注：本實現中有關文件上傳的組件與liferay集成在同一個web應用中，事實上也可以根據實際情況將文件上傳的組件獨立成一個單獨的web應用。但是需要對tinymce.jsp代碼做適當的修改。大家不妨試試：）