Liferay中整合tinyMCE详解

2016-02-19 19:27 11 1 收藏

生活已是百般艰难,为何不努力一点。下面图老师就给大家分享Liferay中整合tinyMCE详解，希望可以让热爱学习的朋友们体会到设计的小小的乐趣。

【 tulaoshi.com - 编程语言】

摘要:

　　   最近在使用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;
　　          }
　　     }

　　 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代码做适当的修改。大家不妨试试：）

来源:http://www.tulaoshi.com/n/20160219/1621031.html

上一篇： Friend过程快于Public过程
下一篇： JSP登录验证功能的实现

看过《Liferay中整合tinyMCE详解》的人还看了以下文章更多>>

Liferay中整合tinyMCE详解 02-19
在JavaScript程序中整合Java函数 02-19
在Apache中整合JSP和PHP 02-19
解析界面设计中的整合与集成 02-17
SSH整合中 hibernate托管给Spring得到SessionFactory 02-19
html中If语句详解 02-19
HTML中meta详解 01-29
Tinymce+jQuery.Validation使用产生的BUG 02-19
香蕉的养生功效整合 04-22
javascript中replace()用法详解 02-19

ASP 中 DateDiff 函数详解

标签： ASP

DateDiff 函数描述返回两个日期之间的时间间隔。语法 DateDiff(interval, date1, date2 [,firstdayofweek][, firstweekofyear]]) DateDiff 函数的语法有以下参数：参数描述 interval 必选。字符串表达式，表示用于计算 date1 和 date2 之间的时间间隔。有关数值，请参阅“设置”部分。 date1, date2 必选。日期表达式。用于计算...

《鬼泣4》技巧视频整合

标签：鬼泣4

《鬼泣4》技巧视频整合会员:hanlingxiyue 原创战斗技巧部分: 很多是用到NERO的 Counter Buster... 很有技巧...大家请多多使用... 火牛战强破冲撞很简单,看他起冲时跳起来按魔手,可以强制取消他的冲撞...别小看那冲撞,撞到很痛的哦... http://union.bokecc.com/flash/pl ... alse&share=true 感觉效果一般,毕竟不会被...

什么是主板的“整合技术”

标签：电脑入门

主板的整合技术是将原来单独配置的板卡(如 AGP 显卡、PCI 声卡、PCI Modem、PCI 网卡等)及IEEE-1394 等设备接口集成在主板上，以提高产品的兼容性和性价比。目前比较流行的做法是在主板上集成一块 AMR(Audio Modem Riser)专用插槽或 CNR(Communication and Networking Riser通讯网络提升器)接口以及集成 IDE 控制器来支持更高的硬盘标准等。还...

AJAX FCKEditor Rich Editor整合篇

标签： Web开发

（http://www.fckeditor.net， JavaEye的编辑器也是采用的FCKEditor，XX所见略同？呵呵），它OpenSource(免费啊，可以直接改源代码啊，呵呵)，功能强大（几乎就是一个office word的web版），提供了对各种服务器端的支持（虽然它完全是一个纯客户端的东东, 但是目前提供了与.NET, PHP, Java, Coldfusion, Perl, Lasso, Python各种服务器端脚本的...

linux中less命令使用详解

标签：服务器

linux中less命令使用详解 less 工具也是对文件或其它输出进行分页显示的工具，应该说是linux正统查看文件内容的工具，功能极其强大。less 的用法比起 more 更加的有弹性。在 more 的时候，我们并没有办法向前面翻，只能往后面看，但若使用了 less 时，就可以使用 [pageup] [pagedown] 等按键的功能来往前往后翻看文件，更容易用...

查看更多精彩>>