做liferay-ui:input-editor标签遇到挺多困难，在网上看到一篇文章写的挺好的，留个备份，方便以后学习。
Liferay中使用fckeditor的研究
Liferay中已经集成了fckeditor和其他的可视化编辑器。这部分，首先研究一下如何添加代码，方便得实现可视化编辑；同时也简单研究一下对fckeditor的定制，添加Flash的上载功能。
代码中添加fckeditor
代码中添加fckeditor还是比较简单，可以参考liferay自己的porlet Blogs。可以参考文件html\portlet\blogs\edit_entry.jsp。大概分为几个步骤：
-
在form中添加liferay-ui:input-editor
在需要显示编辑器的地方添加一下代码
<liferay-ui:input-editor editorImpl="<%= EDITOR_WYSIWYG_IMPL_KEY %>" /> <input name="<portlet:namespace />content" type="hidden" value="" />
其中，第一句是添加编辑器；第二句是一个hidden的input，用来保存实际的值。
-
在jsp的最后，添加EDITOR_WYSIWYG_IMPL_KEY的定义
<%! public static final String EDITOR_WYSIWYG_IMPL_KEY = "editor.wysiwyg.portal-web.docroot.html.portlet.blogs.edit_entry.jsp"; %>
这里面，editor.wysiwyg.portal-web.docroot.html.portlet.blogs.edit_entry.jsp后续我们将在portal-ext.properties文件中进行定义。
-
添加javascript代码
首先添加初始化编辑器的值的函数。这个函数会被编辑器自动调用。如果没有，每次都是编辑空白的内容。
function initEditor() { return "<%= UnicodeFormatter.toString(content) %>"; }然后添加获取编辑内容的函数。这个函数在form提交的时候调用，用于将内容保存到前面定义的hidden字段。
function <portlet:namespace />getArticleContent() { return parent.<portlet:namespace /*gt;editor.getHTML(); }最后在form提交的时候读值
function <portlet:namespace />saveEntry() { document.<portlet:namespace />fm.<portlet:namespace />content.value = <portlet:namespace />getArticleContent(); submitForm(document.<portlet:namespace />fm); } -
在portal-ext.properties中定义编辑器类型
在文件中添加以下代码：
editor.wysiwyg.portal-web.docroot.html.portlet.blogs.edit_entry.jsp=fckeditor
这个代码表示这里用fckeditor编辑器，可以使用的编辑器类型有liferay, fckeditor, simple, tinymce or tinymcesimple
经过这几个步骤，就成功添加了fckeditor。
对fckeditor进行定制
使用缺省的fckeditor，能上载图片，在使用过程中发现不能上载Flash，不太方便，因此尝试做了一些定制。在此就不分析fckeditor的代码了，直接说如何定制。
下面的修改做完之后，重新部署。运行的时候，fckeditor点击Flash按钮之后，会跟图片按钮一样，有一个"浏览"按钮，可以创建目录，并上载Flash文件。
修改fckconfig.jsp文件
在ext中添加目录ext-web\docroot\html\js\editor\fckeditor，然后将fckconfig.jsp从目录portal\portal-web\docroot\html\js\editor\fckeditor拷贝过来。
修改该文件，主要修改或添加以下两行：
FCKConfig.FlashBrowser = true ; FCKConfig.FlashBrowserURL = FCKConfig.BasePath + "filemanager/browser/liferay/browser.html?Type=Flash&Connector=<%= connectorURL %>";
修改frmresourcetype.html文件
在ext中添加目录ext-web\docroot\html\js\editor\fckeditor\editor\filemanager \browser\liferay，然后将frmresourcetype.html从目录portal\portal-web\docroot \html\js\editor\fckeditor\editor\filemanager\browser\liferay拷贝过来。
修改该文件，主要修改：
aTypes = [ ['Document','Document'], ['Image','Image'], ['Page','Page'] ] ;
修改为
aTypes = [ ['Document','Document'], ['Image','Image'], ['Flash','Flash'], ['Page','Page'] ] ;
添加Flash的处理源代码
在ext-impl中创建包com.liferay.portal.editor.fckeditor.receiver.impl
创建Java类FlashCommandReceiver。我的代码里面，Flash不是由JCR保存，而是直接保存到文件系统里面了。以下是这个类的源代码。
package com.liferay.portal.editor.fckeditor.receiver.impl;
import java.io.File;
import org.w3c.dom.Document;
import org.w3c.dom.Element;
import org.w3c.dom.Node;
import com.ext.util.PropsExtUtil;
import com.liferay.portal.editor.fckeditor.command.CommandArgument;
import com.liferay.portal.editor.fckeditor.exception.FCKException;
import com.liferay.portal.kernel.util.StringMaker;
import com.liferay.util.FileUtil;
public class FlashCommandReceiver extends BaseCommandReceiver {
/**
* 创建目录
*/
protected String createFolder(CommandArgument arg) {
String rootPath = getFlashRootRealPath();
String currentFolder = arg.getCurrentFolder();
if (currentFolder.startsWith("/")) {
rootPath = rootPath + currentFolder;
} else {
rootPath = rootPath + "/" + currentFolder;
}
FileUtil.mkdirs(rootPath + "/" + arg.getNewFolder());
return "0";
}
/**
* Flash保存的实际根路径
*
* @return
*/
private String getFlashRootRealPath() {
String rootPath = PropsExtUtil.getAttachmentRootRealPath();
if (!rootPath.endsWith("/")) {
rootPath = rootPath + "/";
}
rootPath = rootPath + "Flash";
return rootPath;
}
/**
* 上载Flash
*/
protected String fileUpload(CommandArgument arg, String fileName,
File file, String extension) {
String newFileName = arg.getCurrentFolder() + "/" + fileName;
String rootPath = getFlashRootRealPath();
if (!newFileName.startsWith(rootPath)) {
newFileName = rootPath + newFileName;
}
FileUtil.move(file, new File(newFileName));
return "0";
}
/**
* 获取所有子目录
*/
protected void getFolders(CommandArgument arg, Node root, Document doc) {
try {
_getFolders(arg, root, doc);
} catch (Exception e) {
throw new FCKException(e);
}
}
/**
* 获取所有文件
*/
protected void getFoldersAndFiles(CommandArgument arg, Node root,
Document doc) {
try {
_getFolders(arg, root, doc);
_getFiles(arg, root, doc);
} catch (Exception e) {
throw new FCKException(e);
}
}
/**
* 获取子目录
*
* @param arg
* @param root
* @param doc
* @throws Exception
*/
private void _getFolders(CommandArgument arg, Node root, Document doc)
throws Exception {
Element foldersEl = doc.createElement("Folders");
root.appendChild(foldersEl);
String rootPath = getFlashRootRealPath();
rootPath = rootPath + arg.getCurrentFolder();
String[] dirs = FileUtil.listDirs(rootPath);
for (int i = 0; i < dirs.length; i++) {
Element folderEl = doc.createElement("Folder");
foldersEl.appendChild(folderEl);
folderEl.setAttribute("name", dirs[i]);
}
}
/**
* 获取文件
*
* @param arg
* @param root
* @param doc
* @throws Exception
*/
private void _getFiles(CommandArgument arg, Node root, Document doc)
throws Exception {
Element filesEl = doc.createElement("Files");
root.appendChild(filesEl);
String rootPath = getFlashRootRealPath();
rootPath = rootPath + arg.getCurrentFolder();
String[] files = FileUtil.listFiles(rootPath);
for (int i = 0; i < files.length; i++) {
Element fileEl = doc.createElement("File");
filesEl.appendChild(fileEl);
fileEl.setAttribute("name", files[i]);
fileEl.setAttribute("desc", files[i]);
File file = new File(rootPath + "/" + files[i]);
byte[] bytes = FileUtil.getBytes(file);
fileEl.setAttribute("size", String.valueOf(bytes.length / 1024));
bytes = null;
StringMaker url = new StringMaker();
url.append(PropsExtUtil.getAttachmentRootVitualPath());
url.append("/Flash");
url.append(arg.getCurrentFolder());
url.append("/").append(files[i]);
fileEl.setAttribute("url", url.toString());
}
}
}
原文地址：http://liaojunyong.spaces.live.com/Blog/cns!8485F0C14B3152CD!272.entry
扫一扫
741
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
