SpringSide开发实战（七）：在项目中整合FCKeditor - 编程入门网

SpringSide开发实战（七）：在项目中整合FCKeditor

Web 2.0时代时代的Web项目，是无论如何也少不了一个在线编辑器的，因此在我们的项 目中整合一个Web编辑器就显得至关重要。在这里，我依然以前面的xkland项目为例，来探 讨在项目中整合FCKeditor的方方面面。

一、关于用户发表文章的功能设计

用户发表文章的功能，大家见过不少，也用过不少，最简单的，莫过于提供一个文本框 ，数据提交后直接写入数据库了事，稍复杂一点的最少也要提供一个输入标题和选择分类的 功能。当然，我们也可以把我们的功能设计得更有特色。在这个示例项目中，我假设开发的 是一个以图文为中心的网络社区，我们每一篇文章都需要用户在它上传的图片中选择一个作 为主题图片，那么，在网站首页的文章列表上，大家看到的将不仅仅只是一个文字的标题， 还有主题图片的缩略图。

先来看看数据表的结构，创建数据表的SQL语句如下：

CREATE　 TABLE　`topics` ( 　 `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编辑器可用，暂时用一个文本区域代替。

SpringSide开发实战（七）：在项目中整合FCKeditor(2)

二、初识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之间的整合早就

凌众科技专业提供服务器租用、服务器托管、企业邮局、虚拟主机等服务，公司网站：http://www.lingzhong.cn 为了给广大客户了解更多的技术信息，本技术文章收集来源于网络,凌众科技尊重文章作者的版权，如果有涉及你的版权有必要删除你的文章，请和我们联系。以上信息与文章正文是不可分割的一部分,如果您要转载本文章,请保留以上信息，谢谢!