任务六实现富文本新闻的发布

2025年09月21日

版权

任务六实现富文本新闻的发布

学习目标

了解富文本的本质。

会使用第三方组件FCKeditor2.6实现富文本的发布与读取。

使用富文本实现新闻内容的上传。

任务描述

任务四实现的新闻发布功能，对新闻内容的处理过于简单。如图1-6-1所示是网络上常见的新闻格式，其内容中有段落的区分、不同功能的文字需要不同的字体，图片与文字设定了一定的对齐方式，有的新闻中还需要设置一些超级链接文字。

图1-6-1 新闻格式范例

如果用简单的文本域控件来编写新闻内容，要考虑到新闻的格式问题，是比较困难的。所以一般的新闻编辑都采用富文本编辑器来编写要发表的新闻内容。本次任务要求使用FCKeditor2.6实现富文本信息的发布，如图1-6-2所示。

图1-6-2 发布富文本新闻界面

任务分析与相关知识

1.富文本编辑器简介

富文本编辑器（Rich Text Editor，RTE）提供类似于Microsoft Word的编辑功能，用户利用所见即所得的编辑环境设置好文本的各种格式，直接提交，提交后的文档内容实际上就是带格式的文档。这些文档存储在数据库中，需要的时候取出来交给浏览器，浏览器可以解析文档中的HTML标签，将文档恢复为提交时候的原文格式。

不同的富文本编辑器可能因为标准的不同在不同的浏览器有不同的表现，相对而言，IE浏览器对它的支持要更完善一些。虽然没有一个统一的标准，但对于最基本的功能，各浏览器提供的API基本一致，从而使编写一个跨浏览器的富文本编辑器成为可能。目前，JSP网站中使用最多的富文本编辑器之一就是FCKeditor。

FCKeditor是一个专门使用在网页上属于开放源代码的所见即所得的文字编辑器，它不需要太复杂的安装步骤即可使用。它可以和PHP、JavaScript、ASP、ASP.NET、ColdFusion、Java以及ABAP等不同的编程语言相结合。“FCKeditor”名称中的“FCK”是这个编辑器作者的名字FredericoCaldeiraKnabben的缩写。FCKeditor相容于绝大部分的网页浏览器，如InternetExplorer5.5+（Windows）、MozillaFirefox1.0+、Mozilla1.3+和Netscape7+。在未来的版本也将会加入对Opera的支持。

2.FCKeditor2.6forJSP用法演示

1）到网站上利用搜索引擎下载FCKeditor-java-2.3.jar和FCKeditor2.6，其中FCKeditor-java-2.3.jar主要提供基本应用所需要的API，FCKeditor2.6为JSP应用提供必要的环境配置。如果读者下载到更新的版本，可以参考相关的帮助文档学习应用技巧。

2）打开Hello项目，在项目的根目录下（也就是WebRoot下）新建文件夹FCKeditor，然后将解压后的FCKeditor2.6下的fckeditor文件夹里面的editor、fckconfig.js、fckeditor.js、fckstyles.xml、fcktemplates.xml复制到FCKeditor目录下，如图1-6-3所示。

图1-6-3 FCKeditor内容截图

3）将解压后的FCKeditor-2.3文件夹中Web/WEB-INF/lib下的包复制到Hello项目对应web路径中的lib下，如图1-6-4所示。

4）将FCKeditor-2.3解压缩以后，将其目录下的标签库文件FCKeditor.tld复制到Hello项目的WebRoot\WEB-INF下，如图1-6-5所示。

图1-6-4 库文件配置截图

图1-6-5 标签库文件配置截图

5）修改Hello项目的配置文件：WEB-INF下的web.xml。web.xml文件如同HTML文件一样都是标签组成的，而且都是成对的标签，在现有的web.xml中读者会发现＜servlet＞…＜/servlet＞标签，它们是用来给Servlet配置别名的，还有＜servlet-mapping＞…＜/servlet-mapping＞标签，它们是用来给Servlet配置路径的，实现的效果与之前用Servlet创建向导配置的别名和路径是一样的。现在在Hello的web.xml中最后一个＜servlet＞…＜/servlet＞标签之后添加如下标签内容。

代码1-6-1 web.xml添加的内容

6）修改第2步创建的FCKeditor文件夹下的fckeditor.js，修改第50行的FCKeditor.BasePath参数，修改之后如下所示。

7）修改第2步创建的FCKeditor文件夹下的fckconfig.js，修改FCKConfig.DefaultLanguage、FCKConfig.LinkBrowserURL、FCKConfig.ImageBrowserURL和FCKConfig.FlashBrowserURL参数的配置，修改之后的新值如下所示。

代码1-6-2 fckconfig.js相关参数修改之后

8）在Hello项目中添加一个HTML文件test1-6-3.html，用来测试FCKeditor实现的富文本编辑器的实际效果，其代码如下所示。

代码1-6-3 test1-6-3.html

9）在Hello项目中添加一个Servlet文件FckeditorDo，该Servlet的别名是fdo（与代码1-6-3中的第10行的action属性相呼应），路径映射是/fdo，该文件被放置在servlets包中，代码如下所示。

代码1-6-4 FckeditorDo.java

运行Hello网站，在浏览器中输入“http：//magy：8080/Hello/test1-6-3.html”，出现如图1-6-6所示的富文本编辑页面，编写一定的内容后，单击“提交”按钮，出现如图1-6-7所示的新闻预览效果。测试中上传的图片被保存到了Web服务器中Hello对应的根目录下的UserFiles\Image文件夹中。