讓FCKeditor在 JSP和JSF 網(wǎng)站項(xiàng)目中跑起來
一、準(zhǔn)備功夫
1.1 下載最新版的FCKeditor
http://www.fckeditor.net/download/
目前最新版是：FCKeditor 2.3.1（FCKeditor_2.3.1）和 FCKeditor.Java（FCKeditor-2.3）
1.2 如果需要使用到j(luò)sf的標(biāo)簽庫，則還需要下載fck-faces-1.5.1, 你可以到
http://sourceforge.net/projects/fck-faces去下載
說明：
FCKeditor 2.3.1 是功能完善的可視化編輯器，文件上傳管理部分功能已經(jīng)支持asp,php,aspx...等等，
唯獨(dú)尚未支持jsp，幸運(yùn)的是Simone Chiaretta制作了Java 的整合文件FCKeditor.Java。
二、部署到項(xiàng)目中去
2.1 把解壓后的\FCKeditor_2.3.1\FCKeditor放到項(xiàng)目的WebContent目錄下，等候修改
2.2 把解壓后的\FCKeditor-2.3\src目錄復(fù)制到項(xiàng)目源碼目錄， 等候修改
2.3 把解壓后的fck-faces-1.5.1\org目錄復(fù)制到項(xiàng)目源碼目錄， 等候修改
注意，暫時(shí)不要把解壓后的jar包放到lib目錄下，因?yàn)橛行﹩栴}需要修改
三、修改
3.1 \FCKeditor\fckeditor.js
修改約第33行的 this.BasePath = '/fckeditor/' ;
為 this.BasePath = '/FCKeditor/' ;
3.2 \FCKeditor\fckconfig.js
修改約第48行的 FCKConfig.DefaultLanguage = 'en' ;
為你喜歡的語言，前提是要它支持。
修改約第134行的
var _FileBrowserLanguage = 'asp' ;
var _QuickUploadLanguage = 'asp' ;
為
var _FileBrowserLanguage = 'jsp' ;
var _QuickUploadLanguage = 'jsp' ;
（不過這個(gè)改不改都沒有所謂，因?yàn)榭梢酝ㄟ^修改web.xml來實(shí)現(xiàn)servlet的url影射。）
3.3 WEB-INF\web.xml
<!-- FCKEditor -->
<servlet> 這個(gè)是“瀏覽服務(wù)器”功能所用到，包括讀取和上傳
<servlet-name>Connector</servlet-name>
<servlet-class>com.fredck.FCKeditor.connector.ConnectorServlet</servlet-class>
<init-param>
<param-name>baseDir</param-name>
<param-value>/UserFiles/</param-value> 這個(gè)根據(jù)需要修改
</init-param>
<init-param>
<param-name>debug</param-name>
<param-value>true</param-value> 調(diào)試時(shí)候打開
</init-param>
<load-on-startup>1</load-on-startup>
</servlet>
<servlet> 這個(gè)是對(duì)話框的簡單上傳功能所用到，可以上傳文件
<servlet-name>SimpleUploader</servlet-name>
<servlet-class>com.fredck.FCKeditor.uploader.SimpleUploaderServlet</servlet-class>
<init-param>
<param-name>baseDir</param-name>
<param-value>/UserFiles/</param-value> 這個(gè)根據(jù)需要修改
</init-param>
<init-param>
<param-name>debug</param-name>
<param-value>true</param-value> 調(diào)試時(shí)候打開
</init-param>
<init-param>
<param-name>enabled</param-name>
<param-value>true</param-value> 如果允許
</init-param>
<init-param>
<param-name>AllowedExtensionsFile</param-name>
<param-value></param-value>
</init-param>
<init-param>
<param-name>DeniedExtensionsFile</param-name>
<param-value>php|php3|php5|phtml|asp|aspx|ascx|jsp|cfm|cfc|pl|bat|exe|dll|reg|cgi</param-value>
</init-param>
<init-param>
<param-name>AllowedExtensionsImage</param-name>
<param-value>jpg|gif|jpeg|png|bmp</param-value>
</init-param>
<init-param>
<param-name>DeniedExtensionsImage</param-name>
<param-value></param-value>
</init-param>
<init-param>
<param-name>AllowedExtensionsFlash</param-name>
<param-value>swf|fla</param-value>
</init-param>
<init-param>
<param-name>DeniedExtensionsFlash</param-name>
<param-value></param-value>
</init-param>
<load-on-startup>1</load-on-startup>
</servlet>
<servlet-mapping> 通過觀察，發(fā)現(xiàn)filemanager請(qǐng)求服務(wù)器的路徑，就修改如下
<servlet-name>Connector</servlet-name>
<url-pattern>/FCKeditor/editor/filemanager/browser/default/connectors/jsp/connector.jsp</url-pattern>
</servlet-mapping>
<servlet-mapping> 這個(gè)是Simone Chiaretta的配置，暫時(shí)未發(fā)現(xiàn)用處
<servlet-name>SimpleUploader</servlet-name>
<url-pattern>/FCKeditor/editor/filemanager/upload/simpleuploader.jsp</url-pattern>
</servlet-mapping>
<servlet-mapping> 通過觀察，發(fā)現(xiàn)filemanager請(qǐng)求服務(wù)器的路徑，就修改如下
<servlet-name>SimpleUploader</servlet-name>
<url-pattern>/FCKeditor/editor/filemanager/upload/jsp/upload.jsp</url-pattern>
</servlet-mapping>
<!-- End of FCKEditor -->
3.4 修改 com.fredck.FCKeditor.uploader.SimpleUploaderServlet
在約第113行附近，就如下面代碼，避免構(gòu)建null路徑：
if (typeStr==null || typeStr.trim().equals("")) typeStr = "File";
（這個(gè)是仿照fckeditor在upload.php,upload.asp等源碼來修改的）
3.5 修改jsf標(biāo)簽
你可以去這里獲得fck-faces的源代碼，或者聯(lián)系作者讓他修正錯(cuò)誤（忘記處理編輯器的寬高）
http://sourceforge.net/forum/forum.php?forum_id=606070
（實(shí)在找不到，你可以考慮反編譯其中這個(gè)文件）
找到 org.fckfaces.taglib.html.FCKFaceEditorTag 類，修改下面方法
protected void setProperties(UIComponent component)
{
super.setProperties(component);
Tags.setString(component, "toolbarSet", toolbarSet);
}
為：
protected void setProperties(UIComponent component)
{
super.setProperties(component);
Tags.setString(component, "toolbarSet", toolbarSet);
Tags.setString(component, "height", height);
Tags.setString(component, "width", width);
}
相 應(yīng)的，你還需要修改 org.fckfaces.component.html.FCKFaceEditor的saveState(FacesContext context)和restoreState(FacesContext context, Object state)方法，來保存和恢復(fù)寬高屬性。
public Object saveState(FacesContext context)
{
Object values[] = new Object[4];
values[0] = super.saveState(context);
values[1]=height;
values[2]=width;
values[3] = toolbarSet;
return ((Object) (values));
}
public void restoreState(FacesContext context, Object state)
{
Object values[] = (Object[])(Object[])state;
super.restoreState(context, values[0]);
System.out.println(values.length);
height=(String)values[1];
width=(String)values[2];
toolbarSet = (String)values[3];
}
找到org.fckfaces.util.Util類
在調(diào)試fck-faces的時(shí)候，發(fā)現(xiàn)fck-faces的標(biāo)簽非常強(qiáng)大，居然不用再jsp頁面引入fckeditor.js，
它竟然能否自動(dòng)做到。可惜分析一下這個(gè)功能是建立它要求你固定的把FCKeditor的代碼放在
/fckfaces/FCKeditor目錄下。如果像我把它放在/FCKeditor就需要作出以下修改：
public class Util{
public Util() {}
public static final String internalPath(String path)
{
return (new StringBuilder()).append(FacesContext.getCurrentInstance().getExternalContext().getRequestContextPath()).append(FCK_FACES_RESOURCE_PREFIX).append(path).toString();
}
public static final String FCK_FACES_RESOURCE_PREFIX = "/"; //這里原來是/fckfaces
}
如果你是反編譯得到的源代碼，則編譯成功之后，需要替換掉原來jar包里面的這個(gè)class文件。
（你可以使用jar命令行來解壓jar，換了文件之后在打包。）
如果你是獲得源碼修改，可能需要注意配置fck-faces.taglib.xml，fck-faces.tld和faces-config.xml。這幾個(gè)文件在壓縮包里面都有。
四、使用
4.1 使用javascipt替換textarea方法
/////////////////////////////////////////////////////
<script type="text/javascript" src="<c:url value="/FCKeditor/fckeditor.js"/>"></script>
<h:form id="newsadd">
<h:outputText value="Title:"/>
<h:inputText value="#{newsAddForm.title }"/>
<br/>
<h:outputText value="Content:"/>
<h:inputTextarea id="content" value="#{newsAddForm.content }" cols="80" rows="5"/>
<br/>
<h:commandButton value="Submit" action="#{newsAddForm.submit }"/>
<script type="text/javascript">
var oFCKeditor = new FCKeditor('newsadd:content') ; //這里設(shè)置textarea的id或name
oFCKeditor.BasePath = '<c:url value="/FCKeditor/"/>' ;
oFCKeditor.Height = "80%"; //這里設(shè)置高度
oFCKeditor.ToolbarSet = "Default" ;
oFCKeditor.ReplaceTextarea();
</script>
</h:form>
/////////////////////////////////////////////////////
4.2 使用jsf標(biāo)簽
/////////////////////////////////////////////////////
<%@ taglib uri="http://www.fck-faces.org/fck-faces" prefix="fck"%>
<h:form id="form1">
<fck:editor toolbarSet="Default" value="#{fckText.text}" width="80%" height="80%" id="myComponentId" cols="80" rows="18"/>
<h:commandButton action="#{fckText.print}"/>
</h:form>
/////////////////////////////////////////////////////
五、嚴(yán)重注意事項(xiàng)
我的web.xml配置了JSF攔截*.html文件，現(xiàn)在FCKeditor使用了大量的*.html，結(jié)果導(dǎo)致
它們都被Faces Servlet攔截了，一個(gè)頁面都出不來，怎么辦呢？
<servlet-mapping>
<servlet-name>Faces Servlet</servlet-name>
<url-pattern>*.html</url-pattern>
</servlet-mapping>
想來想去，沒有什么好辦法，唯有把原來項(xiàng)目中使用*.html的全部改為*.jsf，真慘！
不知道你有什么好方法呢？還請(qǐng)發(fā)表評(píng)論或者來信告知！ samland@21cn.com
<servlet-mapping>
<servlet-name>Faces Servlet</servlet-name>
<url-pattern>*.jsf</url-pattern>
</servlet-mapping>
OK， 祝你順利！