Liferay 整合 TinyMCE 富文本編輯器完整實戰：中文化、圖片上傳與部署架構

專案背景與版本選擇

Liferay 內建編輯器功能簡單、擴充性差。選用 TinyMCE 替代，但官方 advimage 外掛缺乏圖片上傳功能，需二次開發。早期 Liferay 3.6.1 整合存在 IE 相容與效能問題，最終採用穩定版本組合：

• TinyMCE: tinymce_2_0_8
• Liferay: liferay-portal-tomcat-4.1.2

TinyMCE 中文化與字體支援

語言包安裝

1. 下載官方中文語言包 tinymce_lpackage_zh-cn.jar
2. 解壓並複製 tinymce/jscripts/tiny_mce 目錄至 $LIFERAY_HOME/webapps/ROOT/html/js/editor/tinymce
3. 修改 tinymce.jsp 初始化參數：language : "zh_cn"

中文字體下拉選單擴充

修改 advanced/editor_template.js 與 simple/editor_template.js 中的 iFonts / nFonts 變數，新增：宋體=宋體;方正姚體=方正姚體 等。

Liferay 整合 TinyMCE 步驟

1. 解壓 TinyMCE 至 $LIFERAY_HOME/webapps/ROOT/html/js/editor/tinymce
2. 修改 editor.jsp 指定預設編輯器：editorImpl = "tinymce"

<%@ 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 = "tinymce";
RequestDispatcher rd = application.getRequestDispatcher(
    Constants.TEXT_HTML_DIR + "/js/editor/" + editorImpl + ".jsp");
rd.include(request, response);
%>

圖片上傳功能實作（Struts 架構）

後端元件

FileUploadAction.java：DispatchAction 處理上傳，依時間戳產生檔名，儲存至 /pictures 目錄，回傳檔案 URL。

FileUploadForm.java：封裝 FormFile 上傳檔案。

FileUpload.java：輸出流寫入檔案工具類，8KB 緩衝區。

編譯打包為 upload.jar 部署至 WEB-INF/lib。

前端整合

1. upload.jsp 放置於 tinymce/plugins/advimage/，提供檔案上傳表單
2. imagePath.jsp 放置於 html/，回傳圖片路徑
3. 修改 tinymce.jsp 註冊瀏覽回呼：

function fileBrowserCallBack(field_name, url, type, win) {
    win.open("upload.jsp");
}

Struts 設定

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

架構擴充建議

上傳元件可獨立為單獨 Web 應用，需同步調整 tinymce.jsp 回呼 URL 指向獨立服務，支援微服務化部署。