Liferay中整合tinyMCE详解

taizao1234

taizao1234

2016-02-19 19:27

生活已是百般艰难,为何不努力一点。下面图老师就给大家分享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}inymcejscriptsiny_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}inymcejscriptsiny_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代码清单如下：
　　  

（本文来源于图老师网站，更多请访问https://m.tulaoshi.com/bianchengyuyan/）
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下；
　　代码清单如下：
　　

（本文来源于图老师网站，更多请访问https://m.tulaoshi.com/bianchengyuyan/）
 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代码做适当的修改。大家不妨试试：）

　　


展开更多 （50%）
分享

猜你喜欢

Liferay中整合tinyMCE详解

编程语言 网络编程
Liferay中整合tinyMCE详解

在JavaScript程序中整合Java函数

编程语言 网络编程
在JavaScript程序中整合Java函数

s8lol主宰符文怎么配

英雄联盟 网络游戏
s8lol主宰符文怎么配

在Apache中整合JSP和PHP

Web开发
在Apache中整合JSP和PHP

解析界面设计中的整合与集成

平面设计 海报设计 广告设计 画报设计 签名设计 服装设计 名片设计 画册设计 版式设计 商标设计
解析界面设计中的整合与集成

lol偷钱流符文搭配推荐

英雄联盟 网络游戏
lol偷钱流符文搭配推荐

SSH整合中 hibernate托管给Spring得到SessionFactory

Web开发
SSH整合中 hibernate托管给Spring得到SessionFactory

html中If语句详解

Web开发
html中If语句详解

lolAD刺客新符文搭配推荐

英雄联盟
lolAD刺客新符文搭配推荐

Friend过程快于Public过程

Friend过程快于Public过程

JSP登录验证功能的实现

JSP登录验证功能的实现
下拉加载更多内容 ↓