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

二、初识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，加入如下代码：-

1 -

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类提供几个基本属性，可以让我们对编辑器进行简单的控制，它们是：-

　　InstanceName：返回编辑器示例的名字-

　　Width：设置编辑器的宽度，默认为100