先来介绍一下Sitemesh框架和FCKeditor在线编辑器:
Sitemesh是由一个基于Web页面布局、装饰以及与现存Web应用整合的框架。它能帮助我们在由大量页面构成的项目中创建一致的页面布局和外观,如 一致的导航条,一致的banner,一致的版权等等。它不仅仅能处理动态的内容,如jsp,php,asp等产生的内容,它也能处理静态的内容,如htm 的内容,使得它的内容也符合你的页面结构的要求。
Sitemesh官方网址
FCKeditor是一个开源的HTML文本编辑器可以让web程序拥有如MS Word这样强大的编辑功能。
FCKeditor官方网址
接着下载这两个工具用于开发的.jar文件和相应的配置文件。
在这里就不介绍下载和相应的配置啦,网上有很多关于这方面内容的介绍。要是真找不到的话,大家可以参考如下的帮助文件:
Sitemesh使用帮助
FCKeditor for jsp使用帮助
在配置这两个工具时,需要注意的有:
1.Sitemesh有两个配置文件sitemesh.xml和decorators.xml,其中sitemesh.xml用于指定 Sitemesh的配置文件位置和基本配置信息,官方建议是这个配置文件可选,但建议大家还是使用这个配置文件,因为我在开发过程中遇到一个问题就是 decorators.xml中配置的装饰界面的配置信息无法找到相应的路径。
所以要在Sitemesh上正确配置装饰界面的信息时,最好指定配置文件路径,sitemesh.xml配置文件中decorators-file配置如下:
- <property name= "decorators-file" value= "/WEB-INF/sitemesh/decorators.xml" />
<property name="decorators-file" value="/WEB-INF/sitemesh/decorators.xml"/>
结论一 sitemesh.xml配置文件是需要的,而不是官方建议的不需要。
2.在Sitemesh装饰界面的配置文件decorators.xml用于指定哪些界面需要修饰,修饰的界面是什么。
把我的配置给大家看下吧:
- <?xml version= "1.0" encoding= "utf-8" ?>
- <decorators defaultdir="/decorators" >
- <excludes>
- <pattern>/admin/*</pattern>
- <pattern>/admin*.action*</pattern>
- <pattern>/FCKeditor/*</pattern>
- </excludes>
- <decorator name="frame" page= "frame.jsp" >
- <pattern>*</pattern>
- </decorator>
- </decorators>
<?xml version="1.0" encoding="utf-8"?>
<decorators defaultdir="/decorators">
<excludes>
<pattern>/admin/*</pattern>
<pattern>/admin*.action*</pattern>
<pattern>/FCKeditor/*</pattern>
</excludes>
<decorator name="frame" page="frame.jsp">
<pattern>*</pattern>
</decorator>
</decorators>
defaultdir指定装饰界面放置的文件夹,
- <excludes>
- <pattern>/admin/*</pattern>
- <pattern>/admin*.action*</pattern>
- <pattern>/FCKeditor/*</pattern>
- </excludes>
<excludes>
<pattern>/admin/*</pattern>
<pattern>/admin*.action*</pattern>
<pattern>/FCKeditor/*</pattern>
</excludes>
指定哪些界面不需要Sitemesh装饰,在使用FCKeditor时一定要指定FCKeditor不需要装饰,否则会出现一些灵异现象。
- <decorator name= "frame" page= "frame.jsp" >
- <pattern>*</pattern>
- </decorator>
<decorator name="frame" page="frame.jsp">
<pattern>*</pattern>
</decorator>
指定哪些界面需要Sitemesh装饰。它们都是用正则表达式匹配的。
结论二 同时使用Sitemesh和FCKeditor时一定要指定FCKeditor不需要装饰,否则会出现一些灵异现象。
3.在Struts2配置Sitemesh的过滤器时,需要注意Sitemesh的过滤器位置,要在ActionContextCleanUp过滤器之后而且需要在NewFilterDispatcher过滤器之前,配置文件web.xml中过滤器配置如下:
- <filter>
- <filter-name>struts-cleanup</filter-name>
- <filter-class >
- org.apache.struts2.dispatcher.ActionContextCleanUp
- </filter-class >
- </filter>
- <filter-mapping>
- <filter-name>struts-cleanup</filter-name>
- <url-pattern>/*</url-pattern>
- </filter-mapping>
- <filter>
- <filter-name>sitemesh</filter-name>
- <filter-class >
- com.opensymphony.module.sitemesh.filter.PageFilter
- </filter-class >
- </filter>
- <filter-mapping>
- <filter-name>sitemesh</filter-name>
- <url-pattern>/*</url-pattern>
- </filter-mapping>
- <filter>
- <filter-name>struts</filter-name>
- <filter-class >web.NewFilterDispatcher</filter- class >
- <init-param>
- <param-name>encoding</param-name>
- <param-value>utf-8 </param-value>
- </init-param>
- </filter>
- <filter-mapping>
- <filter-name>struts</filter-name>
- <url-pattern>/*</url-pattern>
- </filter-mapping>
<filter>
<filter-name>struts-cleanup</filter-name>
<filter-class>
org.apache.struts2.dispatcher.ActionContextCleanUp
</filter-class>
</filter>
<filter-mapping>
<filter-name>struts-cleanup</filter-name>
<url-pattern>/*</url-pattern>
</filter-mapping>
<filter>
<filter-name>sitemesh</filter-name>
<filter-class>
com.opensymphony.module.sitemesh.filter.PageFilter
</filter-class>
</filter>
<filter-mapping>
<filter-name>sitemesh</filter-name>
<url-pattern>/*</url-pattern>
</filter-mapping>
<filter>
<filter-name>struts</filter-name>
<filter-class>web.NewFilterDispatcher</filter-class>
<init-param>
<param-name>encoding</param-name>
<param-value>utf-8</param-value>
</init-param>
</filter>
<filter-mapping>
<filter-name>struts</filter-name>
<url-pattern>/*</url-pattern>
</filter-mapping>
结论三 在配合Struts2使用时需要注意Sitemesh过滤器的位置。
4.在使用FCKeditor时,需要用Struts2标签按原来的格式显示它时,需要在Struts2的property标签中加入escape="false"属性:
- <s:property value= "#request.project.content" escape= "false" />
<s:property value="#request.project.content" escape="false" />
结论四 用Struts标签原格式显示FCKeditor输入的内容时,需要指定escape属性。
我在开发时遇到的问题和解决方案就是这些了··要是大家有什么问题和疑问的可以留言。希望大家一起多多交流。
附学习FCKeditor开发时的工程,提供简单的显示功能。
简介: | |||
sitemesh应用Decorator模式,用filter截取request和response,把页面组件head,content,banner结合为一个完整的视图。通常我们都是用include标签在每个jsp页面中来不断的包含各种header, stylesheet, scripts and footer,现在,在sitemesh的帮助下,我们可以开心的删掉他们了。如下图,你想轻松的达到复合视图模式,那末看完本文吧。 | |||
一、在WEB-INF/web.xml中copy以下filter的定义: <?xml version="1.0" encoding="GBK"?> <filter> <filter-mapping> </web-app> 二、copy所需sitemesh-2.3.jar到WEB-INF\lib下。 (这里可以下载http://www.opensymphony.com/sitemesh /)三、 建立WEB-INF/decorators.xml描述各装饰器页面。
上面配置文件指定了装饰器页面所在的路径,并指定了一个名为main的装饰器,该装饰器默认装饰web应用根路径下的所有页面。
五、建立一个的被装饰页面 /index.jsp(内容页面)
最后访问index.jsp,将生成如下页面:
而且,所有的页面也会如同index.jsp一样,被sitemesh的filter使用装饰模式修改成如上图般模样,却不用再使用include标签。 |
装饰器 decorator概念 | ||||||
为了建立可复用的web应用程序,一个通用的方法是建立一个分层系统,如同下面一个普通的web应用:
可糟糕的是前端的页面逻辑很难被复用,当你在每一个页面中用数之不尽的include来复用公共的header, stylesheet, scripts,footer时,一个问题出现了-重复的代码,每个页面必须用copy来复用页面结构,而当你需要创意性的改变页面结构时,灾难就爱上了你。 sitemesh通过filter截取request和response,并给原始的页面加入一定的装饰(可能为header,footer...),然后把结果返回给客户端,并且被装饰的原始页面并不知道sitemesh的装饰,这也就达到了脱耦的目的。 据说即将新出台的Portlet规范会帮助我们标准的实现比这些更多更cool的想法,但可怜的我还不懂它到底是一个什末东东,有兴趣的人可以研究 | ||||||
让我们看看怎样配置环境 | ||||||
除了要copy到WEB-INF/lib中的sitemesh.jar 外,还有2个文件要建立到WEB-INF/:
sitemesh.xml 可以设置2种信息:Page Parsers :负责读取stream的数据到一个Page对象中以被SiteMesh解析和操作。(不太常用,默认即可) Decorator Mappers : 不同的装饰器种类,我发现2种比较有用都列在下面。一种通用的mapper,可以指定装饰器的配置文件名,另一种可打印的装饰器,可以允许你当用 http://localhost/aaa/a.html?printable=true方式访问时给出原始页面以供打印(免得把 header,footer等的花哨的图片也搭上) 范例:
decorators.xml :定义构成复合视图的所有页面构件的描述(主要结构页面,header,footer...),如下例:
| ||||||
最重要的是写出装饰器本身(也就是那些要复用页面,和结构页面)。 | ||||||
其实,重要的工作就是制作装饰器页面本身(也就是包含结构和规则的页面),然后把他们描述到decorators.xml中。 让我们来先看一看最简单的用法:其实最常用也最简单的用法就是我们的hello例子,面对如此众多的技术,我想只要达到功能点到为止即可,没必要去研究太深(除非您有更深的需求)。
我们在装饰器页面只用了2个标签: <decorator:title default="装饰器页面..." /> : 把请求的原始页面的title内容插入到<title></title>中间。 <decorator:body /> : 把请求的原始页面的body内的全部内容插入到相应位置。 然后我们在decorator.xml中加入以下描述即可: <decorator name="main" page="main.jsp"> 这样,请求的所有页面都会被重新处理,并按照main.jsp的格式重新展现在你面前。 | ||||||
让我们看看更多的用法。(抄袭sitemesh文档) | ||||||
以下列着全部标签:
插入原始页面(被包装页面)的head标签中的内容(不包括head标签本身)。 <decorator:body />插入原始页面(被包装页面)的body标签中的内容。 <decorator:title [ default="..." ] /> 插入原始页面(被包装页面)的title标签中的内容,还可以添加一个缺省值。 例: /decorator/main.jsp中 (装饰器页面): <title> <decorator:title default="却省title-hello" /> - 附加标题 </title> /aaa.jsp中 (原始页面):<title>aaa页面 </title> 访问/aaa.jsp的结果:<title>aaa页面 - 附加标题 </title> <decorator:getProperty property="..." [ default="..." ] [ writeEntireProperty="..." ]/> 在标签处插入原始页面(被包装页面)的原有的标签的属性 中的内容,还可以添加一个缺省值。 sitemesh文档中的例子很好理解: 注意, <decorator:usePage id="..." /> 例:可用<decorator:usePage id="page" /> : <%= <page:applyDecorator name="..." [ page="..." title="..." ] > 应用包装器到指定的页面上,一般用于被包装页面中主动应用包装器。这个标签有点不好理解,我们来看一个例子: 包装器页面 /decorators/panel.jsp:<p><decorator:title /></p> ... <p><decorator:body /></p> 最 后会是什末结果呢?除了/page.jsp会被默认的包装页面包装上header,footer外,page.jsp页面中还内嵌了date.jsp页 面,并且此date.jsp页面还会被panel.jsp包装为一个title加body的有2段的页面,第1段是date.jsp的title,第2段 是date.jsp的body内容。 另外,page:applyDecorator 中包含的page:param标签所声明的属性值还可以在包装页面中用 decorator:getProperty 标签访问到。 |
可打印的界面装饰 | |
前 面说过有1种可打印的装饰器,可以允许你当用http://localhost/aaa/a.html?printable=true方式访问时,应用其 他的装饰器(自己指定),给出原始页面以供打印(免得把header,footer等的花哨的图片也搭上)。 让我们来看一看怎样实现他: 1.首先在WEB-INFO/sitemesh.xml中设置: 2.在WEB-INFO/decorators.xml中定义相应的printable装饰器 3.最后编写printable装饰器/decorators/printable.jsp
这样就可以让一个原始页面通过?printable=true开关来切换不同的装饰器页面。 |
中文问题 |
由于sitemesh内部所使用的缺省字符集为iso-8859-1,直接使用会产生乱码,我们可以通过以下方法纠正之:
|
总结:使用sitemesh最通常的途径: |
1.配置好环境, 2.在WEB-INFO/decroators.xml中描述你将建立的包装器。 3.开发在decroators.xml中描述的包装器,最好存放在/_decorators目录下 4.ok ,可以看看辛勤的成果了 :)
end |
评论
我没有用sitemesh,但只用了FCKEditor + Struts2 + Spring + Hibernate,但由于Struts2拦截器的原因,使FCKEditor上传图片的功能,不能WORK,其它功能正常。网上关于这个问题,说是配置 Struts2的过滤器:filter mapping 由/*改成/*.shtml或者/*.action,后面是在Struts.xml中定义的扩展:<constant name="struts.action.extension" value="shtml" />但是,Request仍然被Struts拦截了,结果是FCDEditor处理的Reqeust文件流返回空值。你有没有什么好的解决办法?
我也碰过类似的问题,是否有良好的解决办法?
应该是你们拦截器配置的原因,你们的提交表单的ACTION上配置了拦截器吗?若自定义的action拦截器的话,要配置拦截器栈,把默认 default拦截器加上的,不然会出现Reqeust文件流返回空值的情况。建议你们把你们的FCKEDIT上传对应的表单的原码和 struts.xml是原码给我看看````看看我能不能帮你们解决``
我没有用sitemesh,但只用了FCKEditor + Struts2 + Spring + Hibernate,但由于Struts2拦截器的原因,使FCKEditor上传图片的功能,不能WORK,其它功能正常。网上关于这个问题,说是配置 Struts2的过滤器:filter mapping 由/*改成/*.shtml或者/*.action,后面是在Struts.xml中定义的扩展:<constant name="struts.action.extension" value="shtml" />但是,Request仍然被Struts拦截了,结果是FCDEditor处理的Reqeust文件流返回空值。你有没有什么好的解决办法?
我也碰过类似的问题,是否有良好的解决办法?
PS:由于我不用FCK的上传功能··用的是Struts2的上传功能··所以也没遇到类似的情况
网 上关于这个问题,说是配置Struts2的过滤器:filter mapping 由/*改成/*.shtml或者/*.action,后面是在Struts.xml中定义的扩展:<constant name="struts.action.extension" value="shtml" />
但是,Request仍然被Struts拦截了,结果是FCDEditor处理的Reqeust文件流返回空值。
你有没有什么好的解决办法?