`
- 浏览:
21509461 次
- 性别:
- 来自:
杭州
-
让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
}
如果你是反编译得到的源代码,则编译成功之后,需要替换掉原来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, 祝你顺利!
分享到:
Global site tag (gtag.js) - Google Analytics
相关推荐
本程序是描述怎样在jsp中加入fckeditor,并且获得fckeditor中编辑的数据
修改如下 url, 使用 fckeditor servelt 来做文件上传与目录浏览: FCKConfig.LinkBrowserURL = FCKConfig.BasePath " filemanager/browser/default/browser.html?Connector=connectors/jsp/connector " ; FCKConfig....
这个是一个我修改过的fckeditor for jsp 的jar包的源代码,是fckeditor-2.3的,我修改了ConnectorServlet.java和SimpleUploaderServlet.java两个文件 我在这两个文件中都是加了一个静态变量encoding,private static...
fckeditor在jsp页面中的运用fcktwo
压缩包包括: 1、使用FCKeditor jsp版本必备的五个包 2、fckeditor.properties配置 3、FCKeditor_2.6.4.zip 4、web.xml详细配置 5、调用方法的index.jsp 6、详细使用步骤
一个简单的jsp调用FCKeditor 实例,是一个eclipse工程,适合初学者
JSP使用Fckeditor所用jar包
jsp 程序调用fckeditor2.6 版本的 小例子 本人发现fckeditor2.6加 fckeditor for 2.3 的时候在上传中文文件的时候会出现乱码 所以本人就小改了一下 fckeditor2.3的源代码,以时间重命名上传文件名,没什么技术...
FCKeditor 这个开源的HTML 文本编辑器可以让web 程序拥有如MS Word 这样强大的编辑功能,.FCKeditor 支持当前流行的浏览器。
NULL 博文链接:https://gcguchao8888-sina-com.iteye.com/blog/526242
在jsp页面出现FCKeditor 引用错误. 把页面中的下面代码中 id="infoContent" basePath="../../FCKeditor/" width="822" height="300" skinPath="../../FCKeditor/editor/skins/silver/" defaultLanguage="zh-cn" ...
在JSP环境中如何来配置和使用fckeditor,详细说明,非常实用
FCKeditor (jsp在线编辑器)配置总结
FCKeditor上传图片 FCKeditor配置 FCKeditor在jsp中使用 ,加载到myeclipse 中就可以跑起来,源码很清晰
利用FCKeditor在JSP_JavaEE中实现在线编辑.pdf
三个压缩文件是我自己下载的,配置资料是网上的。 FCKeditor_2.6.5.zip fckeditor-java-2.6-bin.zip fckeditor-java-demo-2[1].6.war.zip 至于源码包,是用不上的
FCKeditor 在JSP上的完全安装.doc
用myeclipse6.5开发fckeditor在jsp的应用(简单示例)
采用2.6.4版本,彻底解决fckeditor(jsp版)上传中文文件乱码问题。 使用Tomcat应用服务器时,为了更好的支持URL地址中的中文参数问题.需要在tomcat进行如下设置: 需要修改server.xml文件的如下行: maxThreads=...
fckeditor 针对JSP页面上传图片功能的配置