让FCKeditor在JSP和JSF网站项目中跑起来的方法介绍
让FCKeditor在JSP和JSF网站项目中跑起来的方法介绍
让FCKeditor在 JSP和JSF 网站项目中跑起来一、准备功夫 1.1 下载最新版的FCKeditor http://www.fckeditor.net/download/ 目前最新版是：FCKeditor 2.3.1（FCKeditor_2.3.1）和 FCKeditor.Java（FCKeditor-2.3） 1.2 如果需要使用到jsf的标签库，则还需要下载fck-faces-1.5.1, 你可以到 http://sourceforge.net/projects/fck-faces去下载
说明： FCKeditor 2.3.1 是功能完善的可视化编辑器，文件上传管理部分功能已经支持asp,php,aspx...等等，唯独尚未支持jsp，幸运的是Simone Chiaretta制作了Java 的整合文件FCKeditor.Java。
二、部署到项目中去 2.1 把解压后的/FCKeditor_2.3.1/FCKeditor放到项目的WebContent目录下，等候修改 2.2 把解压后的/FCKeditor-2.3/src目录复制到项目源码目录， 等候修改 2.3 把解压后的fck-faces-1.5.1/org目录复制到项目源码目录， 等候修改注意，暂时不要把解压后的jar包放到lib目录下，因为有些问题需要修改
三、修改 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' ; （不过这个改不改都没有所谓，因为可以通过修改web.xml来实现servlet的url影射。） 3.3 WEB-INF/web.xml
<!-- FCKEditor --> <servlet> 这个是“浏览服务器”功能所用到，包括读取和上传 <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> 这个根据需要修改 </init-param> <init-param> <param-name>debug</param-name> <param-value>true</param-value> 调试时候打开 </init-param> <load-on-startup>1</load-on-startup> </servlet> <servlet> 这个是对话框的简单上传功能所用到，可以上传文件 <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> 这个根据需要修改 </init-param> <init-param> <param-name>debug</param-name> <param-value>true</param-value> 调试时候打开 </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> 通过观察，发现filemanager请求服务器的路径，就修改如下 <servlet-name>Connector</servlet-name> <url-pattern>/FCKeditor/editor/filemanager/browser/default/connectors/jsp/connector.jsp</url-pattern> </servlet-mapping> <servlet-mapping> 这个是Simone Chiaretta的配置，暂时未发现用处 <servlet-name>SimpleUploader</servlet-name> <url-pattern>/FCKeditor/editor/filemanager/upload/simpleuploader.jsp</url-pattern> </servlet-mapping> <servlet-mapping> 通过观察，发现filemanager请求服务器的路径，就修改如下 <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行附近，就如下面代码，避免构建null路径： if (typeStr==null || typeStr.trim().equals("")) typeStr = "File"; （这个是仿照fckeditor在upload.php,upload.asp等源码来修改的） 3.5 修改jsf标签你可以去这里获得fck-faces的源代码，或者联系作者让他修正错误（忘记处理编辑器的宽高） http://sourceforge.net/forum/forum.php?forum_id=606070 （实在找不到，你可以考虑反编译其中这个文件）
找到 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); } 相应的，你还需要修改 org.fckfaces.component.html.FCKFaceEditor的saveState(FacesContext context)和restoreState(FacesContext context, Object state)方法，来保存和恢复宽高属性。
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类
在调试fck-faces的时候，发现fck-faces的标签非常强大，居然不用再jsp页面引入fckeditor.js，它竟然能否自动做到。可惜分析一下这个功能是建立它要求你固定的把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";
}
改为：
public class Util
{
public static final String FCK_FACES_RESOURCE_PREFIX = "/";//这里原来是/fckfaces
public static final String internalPath(String path) {
String thePath = (new StringBuilder()).append(FacesContext.getCurrentInstance().getExternalContext()
.getRequestContextPath()).append(FCK_FACES_RESOURCE_PREFIX).append(path).toString();
thePath = thePath.replaceAll("//", "/");//避免Webapp放在ROOT时出现 src="//FCKEditor..." 错误
return thePath;
}
}
如果你是反编译得到的源代码，则编译成功之后，需要替换掉原来jar包里面的这个class文件。（你可以使用jar命令行来解压jar，换了文件之后在打包。）
如果你是获得源码修改，可能需要注意配置fck-faces.taglib.xml，fck-faces.tld和faces-config.xml。这几个文件在压缩包里面都有。
四、使用
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') ; //这里设置textarea的id或name
oFCKeditor.BasePath = '<c:url value="/FCKeditor/"/>' ;
oFCKeditor.Height = "80%"; //这里设置高度
oFCKeditor.ToolbarSet = "Default" ;
oFCKeditor.ReplaceTextarea();
</script>
</h:form>
/////////////////////////////////////////////////////
4.2 使用jsf标签
/////////////////////////////////////////////////////
<%@ 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>
/////////////////////////////////////////////////////
五、严重注意事项我的web.xml配置了JSF拦截*.html文件，现在FCKeditor使用了大量的*.html，结果导致它们都被Faces Servlet拦截了，一个页面都出不来，怎么办呢？
<servlet-mapping> <servlet-name>Faces Servlet</servlet-name> <url-pattern>*.html</url-pattern> </servlet-mapping>
想来想去，没有什么好办法，唯有把原来项目中使用*.html的全部改为*.jsf，真惨！不知道你有什么好方法呢？还请发表评论或者来信告知！ samland@21cn.com
<servlet-mapping> <servlet-name>Faces Servlet</servlet-name> <url-pattern>*.jsf</url-pattern> </servlet-mapping>
OK， 祝你顺利！