Liferay中整合tinyMCE详解

原创 2007年10月04日 16:53:00

Liferay中整合tinyMCE详解

最近在使用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的中文化以及中文字体的使用问题。


(一)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);
%>
<%--" />--%> 


(三)为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/ROOT/html/js/editor/ tinymce/ plugins/advimage/目录下;

Upload.jsp的代码清单如下:  
     <form enctype="multipart/form-data" action="/c/portal/fileUpload?method=uploadImage" method="post">
      
      
     </form>



4.编写imagePath.jsp并复制到/webapps/ROOT/html下;
代码清单如下:
 <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配置:
 
     ......
    


增加action配置:
 
     ……
    
           name="fileUploadForm"
           path="/portal/fileUpload"
           scope="request"
           type="com.family.fileupload.web.action.FileUploadAction"
           parameter="method">
      
      
    


注:本实现中有关文件上传的组件与liferay集成在同一个web应用中,事实上也可以根据实际情况将文件上传的组件独立成一个单独的web应用。但是需要对tinymce.jsp代码做适当的修改。大家不妨试试:) 

Liferay中整合tinyMCE详解

最近在使用Liferay开发一个门户网站的过程中遇到默认的在线文章编辑器无法满足用户需求的问题。Liferay默认的文章编辑器功能比较简单,且可扩展性较差。经过再三权衡,决定采用tinyMCE作为Li...
  • zaowei21
  • zaowei21
  • 2007年05月16日 12:13
  • 382

Liferay中整合tinyMCE详解

Liferay中整合tinyMCE详解 最近在使用Liferay开发一个门户网站的过程中遇到默认的在线文章编辑器无法满足用户需求的问题。Liferay默认的文章编辑器功能比较简单,且可扩展性较差。经过...
  • sumongh_pan
  • sumongh_pan
  • 2007年04月11日 15:14
  • 1503

Vue + Webpack 完美整合富文本编辑器 TinyMce

选择一个合适的富文本编辑器对于一个前端项目至关重要,这次我基于Vue来开发我项目中的前端部分,经过权衡选择了tinymce。其在UI,功能都很适合,tinymce官方文档:点击打开链接; 引...
  • a610786189
  • a610786189
  • 2018年01月07日 15:05
  • 430

在Angular框架中使用TinyMCE在线编辑器

在之前的文章中谈到在angular中使用ckeditor,但经验证,ckeditor不能简单能使用ng-model来绑定变量,这多多少少带来了不便,所以尝试选择另外一款,TinyMCE。     进...
  • u011649436
  • u011649436
  • 2013年10月12日 20:19
  • 2368

在Django中使用最新版tinymce

初次使用时候使用django-tinymyce。但是使用过程中发现功能不全,不大好用。从新google一下。发现1个http://vimeo.com/12903891。在他基础上修改。 使用...
  • watsy
  • watsy
  • 2013年08月01日 14:11
  • 3119

Liferay Portal 学习笔记(二):liferay项目结构剖析

一个Portlet项目至少由三个部分组成: 1 Java 代码源 2  配置文件 3 客户端文件(jsp,js,css,graphics files, etc) liferay项目标准...
  • MinorPluto
  • MinorPluto
  • 2015年11月11日 09:39
  • 531

Django整合TinyMCE富文本编辑器

Django版本1.7,操作系统windows 7,使用pipinstall django-tinymce下载tinymce(前提是装的python里有pip功能),当然也可以手动下载好后python...
  • yx1105842102
  • yx1105842102
  • 2015年05月18日 09:35
  • 1279

TinyMce介绍与使用心得

TinyMCE是一个轻量级的基于浏览器的所见即所得编辑器,由JavaScript写成。它对IE6+和Firefox1.5+都有着非常良好的支持。功能方面虽然不能称得上是最强,但绝对能够满足大部分网站的...
  • lg_lin
  • lg_lin
  • 2006年06月01日 18:56
  • 2382

liferay spring mvc的实现

1 首先推荐一本liferay的书    Portlet  In Action,   本例是按照这本书进行配置的,原文在 Getting started with Spring Portlet M...
  • jianfpeng241241
  • jianfpeng241241
  • 2014年12月08日 00:21
  • 892

Django在admin后台集成TinyMCE富文本编辑器添加上传图片功能

博客网站怎么能少了图片,为TinyMCE编辑器添加上传图片功能。   第一步:定义表存图片路径 models.py class AdminIMG(models.Model): ...
  • hjxzt1
  • hjxzt1
  • 2017年09月23日 21:28
  • 249
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:Liferay中整合tinyMCE详解
举报原因:
原因补充:

(最多只允许输入30个字)