Liferay Web Content(Journal), Blog 等, 使用的 所見及所得 HTML 編輯器
在Liferay 5.2.3預設是使用 fckeditor，有支援的例 :
#the available WYSIWYG editors : liferay , fckeditor , simple , tinymce , or tinymcesimple
參考
http://www.liferay.com/zh/community/wiki/-/wiki/Main/Portal+Properties+5.2.3
想換成其他 editor就加入portal.properties
{$LIFERAY_HOME}\webapps\ROOT\WEB-INF\classes\portal-ext-properties
editor.wysiwyg.default=tinymce
editor.wysiwyg.portal-web.docroot.html.portlet.blogs.edit_entry.jsp=tinymce
editor.wysiwyg.portal-web.docroot.html.portlet.calendar.edit_configuration.jsp=tinymce
editor.wysiwyg.portal-web.docroot.html.portlet.enterprise_admin.view.jsp=tinymce
editor.wysiwyg.portal-web.docroot.html.portlet.invitation.edit_configuration.jsp=tinymce
editor.wysiwyg.portal-web.docroot.html.portlet.journal.edit_article_content.jsp=tinymce
editor.wysiwyg.portal-web.docroot.html.portlet.journal.edit_article_content_xsd_el.jsp=tinymce
editor.wysiwyg.portal-web.docroot.html.portlet.journal.edit_configuration.jsp=tinymce
editor.wysiwyg.portal-web.docroot.html.portlet.login.configuration.jsp=tinymce
editor.wysiwyg.portal-web.docroot.html.portlet.mail.edit.jsp=tinymce
editor.wysiwyg.portal-web.docroot.html.portlet.mail.edit_message.jsp=tinymce
editor.wysiwyg.portal-web.docroot.html.portlet.message_boards.edit_configuration.jsp=tinymce
editor.wysiwyg.portal-web.docroot.html.portlet.shopping.edit_configuration.jsp=tinymce
editor.wysiwyg.portal-web.docroot.html.portlet.wiki.edit.html.jsp=tinymce
以上的參數宣告是 告訴Liferay 哪一些portlet要用的editor 種類
沒有以上這些參數，則是用預設fckeditor。
如果只想換成TinyMCE，而不要求TinyMCE版本(Liferay5.2.3是使用TinyMCE3.2.1)，那以上就已完成。
Tomcat重新啟動即可。
=======================================================================
接下來是將Liferay 原本自帶的 TinyMCE 升級 TinyMCE4.1.3版本。
首先上面的步驟也是照做一次，將portal-ext.properties加入參數。
接著到TinyMCE官網下載 TinyMCE4.1.3.zip的版本
http://www.tinymce.com/download/download.php
解壓縮後，
假設解壓目錄為 {$TINYMCE_PATH}，將{$TINYMCE_PATH}\tinymce\js\tinymce
複製到{$LIFERAY_HOME}\webapps\ROOT\html\js\editor。
再來就在該目錄修改 tinymce.jsp
<%@ page import="com.liferay.portal.kernel.util.HtmlUtil" %>
<%@ page import="com.liferay.portal.kernel.util.ParamUtil" %>
<%@ page import="com.liferay.portal.kernel.util.Validator" %>
<%
String initMethod = ParamUtil.get(request, "initMethod", DEFAULT_INIT_METHOD);
String onChangeMethod = ParamUtil.getString(request, "onChangeMethod");
%>
<html>
<head>
<title>Editor</title>
<script type="text/javascript" src="tinymce/tinymce.min.js"></script>
<script type="text/javascript">
var onChangeCallbackCounter = 0;
tinymce.init({
selector: "textarea",
theme: "modern",
file_browser_callback : "fileBrowserCallback",
init_instance_callback : "initInstanceCallback",
onchange_callback : "onChangeCallback",
plugins: [
"advlist autolink lists link image charmap print preview hr anchor pagebreak",
"searchreplace wordcount visualblocks visualchars code fullscreen",
"insertdatetime media nonbreaking save table contextmenu directionality",
"emoticons template paste textcolor colorpicker textpattern"
],
toolbar1: "insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image",
toolbar2: "print preview media | forecolor backcolor emoticons",
image_advtab: true,
});
function fileBrowserCallback(field_name, url, type) {
}
function getHTML() {
return tinymce.activeEditor.getContent();
}
function init(value) {
setHTML(decodeURIComponent(value));
}
function initInstanceCallback() {
init(parent.<%= initMethod %>());
}
function onChangeCallback(tinyMCE) {
// This purposely ignores the first callback event because each call
// to setContent triggers an undo level which fires the callback
// when no changes have yet been made.
// setContent is not really the correct way of initializing this
// editor with content. The content should be placed statically
// (from the editor's perspective) within the textarea. This is a
// problem from the portal's perspective because it's passing the
// content via a javascript method (initMethod).
if (onChangeCallbackCounter > 0) {
<%
if (Validator.isNotNull(onChangeMethod)) {
%>
parent.<%= HtmlUtil.escape(onChangeMethod) %>(getHTML());
<%
}
%>
}
onChangeCallbackCounter++;
}
function setHTML(value) {
tinymce.activeEditor.setContent(value);
}
</script>
</head>
<body leftmargin="0" marginheight="0" marginwidth="0" rightmargin="0" topmargin="0">
<textarea id="textArea" name="textArea" style="height: 100%; width: 100%;"></textarea>
</body>
</html>
<%!
public static final String DEFAULT_INIT_METHOD = "initEditor";
%>
TinyMCE4.1.3版 與 以往Tiny3.x.x版本內容有差別。
以上的JSP 是直接從原有的tinymce.jsp 做修改，需要注意的地方如下
EX:
1) import src 的 js 檔 從 tiny_mce.js 換成 tinymce.min.js
2) tinyMCE 變數名 換成 tinymce
3) theme 的內容從 advanced/simple 換成只有 modern
4) tinymce.init 的語法屬性有修改
上面的init 屬性可能還不是最適合的狀態，其他可參考
http://www.tinymce.com/wiki.php/Configuration
http://www.tinymce.com/tryit/basic.php
另外要換成繁體中文可以到官方下載語言包
http://www.tinymce.com/i18n/index.php
解壓後 zh_TW.js檔案 丟到 tinymce/langs資料夾底下
並在tinymce.init的屬性加上 language : 'zh_TW', 即可。
沒有留言:
張貼留言