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授权的网站，转载时请务必保留以下作者信息和链接
作者:李乐鑫
原文:
关键字:Liferay;tinyMCE

（一）tinyMCE的中文化以及中文字体
    中文化方法：
    tinyMCE的中文化问题解决非常简单。首先到tinyMCE的官方中文语言包tinymce_lpackage_zh-cn.jar，并将其解压（假设解压后的路径为{$LANGUAGE_PATH}）。然后将解压后的{$LANGUAGE_PATH}\tinymce\jscripts\tiny_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}\tinymce\jscripts\tiny_mce复制到{$LIFERAY_HOME}\ \webapps\ROOT\html\js\editor下，并改名为tinymce；
    2． 设置Liferay应用的默认html编辑器为tinymce；（可以修改配置文件system.properties或直接修改{$LIFERAY_HOME}\webapps\ROOT\html\js\editor\editor.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);
%>
<%----%>

 

[1]   

【责编:Peng】

--------------------next---------------------