- 浏览: 150269 次
- 性别:
- 来自: 保定
文章分类
最新评论
-
hellostory:
高级查询的查询参数放哪里?
SSH超实用分页实现(原创开源)! -
topbox163:
不错。。。。。。。。。
拥有属于自己的SVN(Google SVN)(更新版) -
shiyangxt:
忧_零 写道不知道这个问题LZ是否解决了啊,今天同样碰到这个问 ...
救助贴???关于Mysql插入二进制文件 -
忧_零:
不知道这个问题LZ是否解决了啊,今天同样碰到这个问题了,错误相 ...
救助贴???关于Mysql插入二进制文件 -
sornor:
不错!总算对servlet和jsp之间的关系有了了解了!感谢感 ...
JSP与Servlet的关系和实例分析(转帖)
很经典的一篇文章,讲的很好,最近我要用这个,好好熟悉一下。
Web 2.0时代时代的Web项目,是无论如何也少不了一个在线编辑器的,因此在我们的项目中整合一个Web编辑器就显得至关重要。在这里,我依然以前面的xkland项目为例,来探讨在项目中整合FCKeditor的方方面面。
一、关于用户发表文章的功能设计
用户发表文章的功能,大家见过不少,也用过不少,最简单的,莫过于提供一个文本框,数据提交后直接写入数据库了事,稍复杂一点的最少也要提供一个输入标题和选择分类的功能。当然,我们也可以把我们的功能设计得更有特色。在这个示例项目中,我假设开发的是一个以图文为中心的网络社区,我们每一篇文章都需要用户在它上传的图片中选择一个作为主题图片,那么,在网站首页的文章列表上,大家看到的将不仅仅只是一个文字的标题,还有主题图片的缩略图。
先来看看数据表的结构,创建数据表的SQL语句如下:
`id` int ( 11 ) NOT NULL auto_increment,
`catalogid` int ( 11 ) NOT NULL ,
`subject` varchar ( 60 ) default NULL ,
`content` text ,
`pictures` varchar ( 2000 ) NOT NULL ,
`mainpicture` varchar ( 40 ) NOT NULL ,
`userid` int ( 11 ) NOT NULL ,
`time` timestamp NOT NULL default CURRENT_TIMESTAMP on update CURRENT_TIMESTAMP ,
`lastedittime` timestamp NOT NULL default ' 2007-01-01 00:00:00 ' ,
`lastreplytime` timestamp NOT NULL default ' 2007-01-01 00:00:00 ' ,
`visitcount` int ( 11 ) NOT NULL ,
PRIMARY KEY (`id`),
KEY `subject` (`subject`),
KEY `userid` (`userid`),
KEY `time` (`time`),
KEY `lastreplytime` (`lastreplytime`)
) ENGINE = InnoDB DEFAULT CHARSET = utf8 |
其中,catalogid字段为文章分类,subject字段为标题,content字段为正文。比较特殊的是pictures字段和mainpicture字段,pictures保存文章中包含的所有图片的url,以“|”符号分割,如“001.jpg|002.jpg|003.jpg...”,而mainpicture就是主题图片的url了。有人会问:“保存主题图片的url就够了,为什么还要保存所有的图片url呢?”,这样设计主要是为了考虑到用户有时候会修改文章,重新选择别的图片作为主题图片,这个时候pictures字段就派上用场了,因为它可以向用户提供候选项。
这样的功能设计应该提供如下的用户界面,该页面文件名为EditPosts.jsp:
在这里,我们还没有Web编辑器可用,暂时用一个文本区域代替。
二、初识FCKeditor
在听说FCKeditor之前,我用过一个在线编辑器eWebEditor,提供ASP/JSP/PHP等好几个版本,功能是非常的好,文档也很详细,但是听说只支持IE浏览器;而FCKeditor在网上大名鼎鼎,是一个受关注非常高的开源项目,并且能够跨浏览器支持。因此我选择FCKeditor。FCKeditor的最新版本是2.4,大家可以到
http://www.fckeditor.net/download这里下载,如下图
下载并解压缩到fckeditor文件夹,打开该文件夹,我们可以看到如下文件及目录:
其中_samples目录下是示例,_testcases目录下是测试用例,editor目录下是编辑器的主要文件;此外,从该目录中的文件不难看出,FCKeditor提供支持asp、php、perl、python等等各种服务器技术的版本,但不支持.net和Java Web。不过不要担心,FCKeditor与Java Web之间的整合早就有人做好了,稍后我们就会用到。
了解浏览器技术的人都不难想到,Web编辑器其实应该是客户端技术,它是通过JavaScript来控制页面上的元素和通过弹出窗口来模拟对话框而做到的;只有在提交文章或者上传文件的时候才需要跟服务器端交互。因此,要将该编辑器快速整合到项目中以看到效果,是非常简单的。
三、使用JavaScript整合FCKeditor
将刚刚解压得到的fckeditor目录拷贝到我们的项目中的src\main\webapp目录下,打开刚才建立的EditPosts.jsp,加入如下代码:
2 < script language = " javascript " >
3 window.onload = function () {
4 var oFCKeditor = new FCKeditor( 'myTextArea' ) ;
5 oFCKeditor.BasePath = " fckeditor/ " ;
6 oFCKeditor.ReplaceTextarea();
7 }
</scrip>
在这里,第一行代码是引入fckeditor中的fckeditor.js文件,其中定义了FCKeditor类,第四行就是利用该类创建一个编辑器对象,而myTextArea是表单中文本区域的名字,在第六行,通过FCKeditor类的ReplaceTextArea方法,文本区域就被替换成了Web编辑器。刷新页面,就可以看到效果:
FCKeditor类提供几个基本属性,可以让我们对编辑器进行简单的控制,它们是:
Width:设置编辑器的宽度,默认为100%
Height:设置编辑器的高度,默认值为200
ToolbarSet:设置编辑器的工具条集合,默认值为"default",稍后会讲到怎样自定义工具条
Value:设置显示在编辑器中的内容(包含HTML),默认值为空
BasePath:编辑器的目录,一定要设置正确,否则编辑器会找不到它需要的文件,在本例中,由于我们直接将fckeditor目录放到项目的根目录下,因此设置为"fckeditor/"
CheckBrowser:设置是否检测浏览器,默认为true
DisplayErrors:设置是否显示错误信息,默认为true
此外,FCKeditor类还有一个集合属性Config[ key ] = value,通过该集合属性,我们可以进行一个更高级的设置,如设置默认语言、更换皮肤等等。
综上所述,下面的代码将重新设置编辑器的高和宽、将工具条设置为基本工具条,将皮肤设置为office2003样式:
<script language="javascript">
window.onload = function(){
var oFCKeditor = new FCKeditor( 'myTextArea' ) ;
oFCKeditor.BasePath = "fckeditor/";
oFCKeditor.Width = "800";
oFCKeditor.Height = "300";
oFCKeditor.ToolbarSet = "Basic";
oFCKeditor.Config["SkinPath"] = "skins/office2003/";
oFCKeditor.ReplaceTextarea();
}
</script>
效果图:
四、通过FCKeditor.java整合FCKeditor
使用JavaScript整合FCKeditor,我们很快就能看到编辑器的效果,并进行文章的编辑。但是,在需要和服务器端进行交互的时候(比如上传图片),就会出错。因此,我们不得不在服务器端做一点手脚。这里,我们需要使用的是FCKeditor.java,其最新版本是2.3,还是在刚才的下载页面,找到下载链接,如下图:
将下载文件解压,我们可以看到有doc目录,有src目录,甚至还有一个build.xml,让我们可以重新构建项目;但是,这些我们统统都不需要,我们只要web\WEB-INF目录下的东西,在这个目录下,提供了一个web.xml,同时在lib目录下提供了两个.jar文件,这便是全部。看到这里,大家肯定能够想到,Java Web项目的灵魂是什么?那就是web.xml。我们所要做的,就是把lib目录下的两个.jar文件拷贝到我们项目的src/main/webapp/WEB-INF/lib下,同时将web.xml中的内容整合到我们项目的src/main/webapp/WEB-INF/web.xml中。
web.xml中的内容很简单,只定义了两个Servlet映射,并且对上传文件的目录和允许哪些文件上传、拒绝哪些文件上传做了设置,如下:
<servlet-name>Connector</servlet-name>
<servlet-class>com.fredck.FCKeditor.connector.ConnectorServlet</servlet-class>
<init-param>
<param-name>baseDir</param-name>
<param-value>/UploadFiles/</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>/UploadFiles/</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>
<servlet-name>Connector</servlet-name>
<url-pattern>/fckeditor/editor/filemanager/browser/default/connectors/jsp/connector</url-pattern>
</servlet-mapping>
<servlet-mapping>
<servlet-name>SimpleUploader</servlet-name>
<url-pattern>/fckeditor/editor/filemanager/upload/simpleuploader</url-pattern>
</servlet-mapping>
请注意,这两个servlet的url-pattern我都在原来代码的前面加上了/fckeditor。
然后,我们就可以抛开JavaScript,而在服务器端使用标签来创建Web编辑器了。先在EditPosts.jsp中引入标签库:
再在原来放textarea的地方,放如下代码:
imageBrowserURL="/xkland/fckeditor/editor/filemanager/browser/default/browser.html?Type=Image&Connector=connectors/jsp/connector"
linkBrowserURL="/xkland/fckeditor/editor/filemanager/browser/default/browser.html?Connector=connectors/jsp/connector"
flashBrowserURL="/xkland/fckeditor/editor/filemanager/browser/default/browser.html?Type=Flash&Connector=connectors/jsp/connector"
imageUploadURL="/xkland/fckeditor/editor/filemanager/upload/simpleuploader?Type=Image"
linkUploadURL="/xkland/fckeditor/editor/filemanager/upload/simpleuploader?Type=File"
flashUploadURL="/xkland/fckeditor/editor/filemanager/upload/simpleuploader?Type=Flash">
This is some <strong>sample text</strong>. You are using <a href="http://www.fredck.com/fckeditor/">FCKeditor</a>.
</FCK:editor>
这里有一点一定要注意,那就是这里的属性都要避免使用相对路径。
刷新页面,又见编辑器,此时,可以顺利的上传文件了。整合编辑器的任务到此完成。下一步,就是怎样对编辑器进行更多的控制了。
五、对编辑器进行更多控制
1、自定义工具条:打开fckeditor目录下的fckconfig.js文件,添加如下代码:
['Source','Preview'],
['Undo','Redo','-','SelectAll','Cut','Copy','Paste','-','RemoveFormat','-','Find','Replace'],
['Link','Unlink','Anchor'],
['FitWindow','-','About'],
'/',
['Bold','Italic','Underline','StrikeThrough','-','Subscript','Superscript'],
['OrderedList','UnorderedList','-','Outdent','Indent'],
['JustifyLeft','JustifyCenter','JustifyRight','JustifyFull'],
['Image','Flash','Table','Rule','Smiley'],
'/',
['Style','FontFormat','FontName','FontSize'],
['TextColor','BGColor']
] ;
2、添加常用的中文字体:在上面打开的文件中找到
3、更改JSP页面中定义编辑器的标签,如下:
skinPath="/xkland/fckeditor/editor/skins/office2003/"
toolbarSet="Usable"
imageBro
发表评论
-
Struts+DAO+Hibernate搭建完成!(源码)
2008-07-15 10:38 770昨天搭了这个框架实现 ... -
SSH终于搭建完成了!
2008-07-17 22:08 1198真的是费了好大的劲才 ... -
Common FileUpload组件的使用!(源码)
2008-08-11 20:06 1298今天搞了一下文件上传功能组件Common FileUpload ... -
Ajax入门(转载)
2008-09-14 15:45 728作为J2EE ... -
Struts2+Spring+Hibernate搭建全解!
2008-09-27 22:49 1241Struts2+Spring+Hibernate是J2EE的最 ... -
J2EE实现XML文件的读取与导出(源码)!
2008-10-06 12:19 1116最近学习了XML的相关知识,深感其强大。 XML这个技术家族非 ... -
struts2的8点经验总结(转载)
2008-10-09 12:20 868转自:javaeye 1、在web.xml ... -
Struts2 实现分页(源码)!
2008-10-22 14:28 3038好久没好好写点东西了,最近一直在熟练Str ... -
Struts2拦截器权限验证(源码)!
2008-10-24 13:41 3330长话短说,抛砖引玉,举个很简单的例子,通过 ... -
Struts2与FCKeditor整合解决方案
2008-11-04 22:30 1171今天遇到Struts2与FCKeditor整合的问题,我很是无 ... -
SSH超实用分页实现(原创开源)!
2008-12-06 15:34 2791SSH的分页网上有不少的例子,有利用session的,有利 ...
相关推荐
HTML编辑器FCKeditor在J2EE项目的使用配置
最近想学习FCKeditor,在网上搜索了好久,资料不少,但就是跑不起来,因为我用的是2.4版本的,不是说的版本不对配置啰嗦就是根本包结构都不一样,无奈之下只好在官网上download了个demo跑了下好使,不过一看这demo不是J2EE...
Fckeditor皮肤Fckeditor皮肤Fckeditor皮肤Fckeditor皮肤Fckeditor皮肤Fckeditor皮肤
FCKeditor.Net_2.6.3.zip和FCKeditor-v2.6.3
NULL 博文链接:https://snv.iteye.com/blog/2034216
FCKeditor应用完整例子,包括文字格式,文件上传等一一具全 J2EE JSP JAVA
2.解压缩到你的站点根文件夹中名为FCKEDITOR的文件夹中(名称必须为FCKEDITOR,因为配置文件中已经使用此名称来标示出FCKEDITOR的位置) 3.现在,编辑器就可以使用了,如果想要查看演示,可以按下面方法访问: ...
fckeditor 源码 demo fckeditor 源码 demo fckeditor 源码 demo fckeditor 源码 demo
1 FCKeditor的下载及介绍 4 1.1 下载地址 4 1.2 FCKeditor下载包的介绍 4 2 FCKeditor的目录和文件精简 4 3 在页面创建FCKeditor 4 3.1 Js创建FCKeditor实例: 4 3.1.1 方法一:内嵌方法(推荐) 4 3.1.2 方法二:替换...
fckEditor,fckEditor,fckEditor
FCKeditor上传图片 FCKeditor配置 FCKeditor在jsp中使用 ,加载到myeclipse 中就可以跑起来,源码很清晰
兼容目前的浏览器 里面包含FCKeditor编辑器和控件 一、集成方法 FCKeditor应用在ASP.NET上,需要两组文件,一组是FCKeditor本身,另一个是用于ASP.NET的FCKeditor控件(分为1.1和2.0两个版本,这里使用2.0版本)。 ...
FCKeditor开发jar包及fckeditor文件夹
1 FCKeditor简介: FCKeditor是一个专门使用在网页上属于开放源代码的所见即所得文字编辑器。它志于轻量化,不需要太复杂的安装步骤即可使用。它可和PHP、JavaScript、ASP、ASP.NET、ColdFusion、Java、以及ABAP等...
fckeditor api fckeditor api fckeditor api fckeditor api fckeditor api fckeditor apifckeditor api
Fckeditor(综合利用工具)
fckeditor 完整示例 samples
FCKEditor2.6.3完整版 FCKEditor2.6.3完整版
FCKEditor使用帮助文档。FCKEditor使用帮助文档。FCKEditor使用帮助文档。FCKEditor使用帮助文档。
Fckeditor2.6.5 Build 23959 1.将得到的fckeditor文件夹复制到网站的目录下面 2.配置WebConfig appSettings> <add key="FCKeditor:BasePath" value="~/fckeditor/"/> <add key="FCKeditor:UserFilesPath" ...