Rich Editor  是我们在  Web  应用经常使用的一种客户端控件，目前网上开源的、收费的也比较多，在对网上各种富文本编辑器进行了一系列比较之后，我最终选择了  FCKEditor（http://www.fckeditor.net， JavaEye  的编辑器也是采用的  FCKEditor，XX  所见略同？呵呵），它  OpenSource(免费啊，可以直接改源代码啊，呵呵)，功能强大（几乎就是一个  office word  的  web  版），提供了对各种服务器端的支持（虽然它完全是一个纯客户端的东东, 但是目前提供了与.NET, PHP, Java, Coldfusion, Perl, Lasso, Python  各种服务器端脚本的紧密集成），支持国际化（汉化做的非常棒），可更换皮肤（office 2000的风格简直可以乱真），内嵌文件上传（Java  版本支持这个），保持一定的更新状态（目前版本为2.3.2），如此等等。当然它还有N多功能，不过我还没仔细去研究，如果有哪位用到的，可以告知一二。

至于  FCKEditor  的各种用法我就不在这里一一列举，网上有很多相关的文章，它也自带了不错的sample，可以非常容易加入到我们自己的项目中去。

不过在  Ajax  应用中如何使用  FCKEditor  控件呢？这个  FCKEditor  好像没有提供相应的答案，因为  Ajax  都是采用的无刷新提交，而  FCKEditor  只能在  Form  提交方式下使用，为什么这样说呢，那我们还得从  FCKEditor  的执行流程说起。

FCKEditor  的编辑器实际上是一个  IFrame，每次在创建一个  FCKEditor  实体的时候，都会新建一个  IFrame，然后各种  toolbar  和编辑区都塞到这个  IFrame  中去了，在  IFrame  外面必须有一个对应的  input  元素（这个一般是一个  textarea，FCKEditor  中称之为  LinkedField），这样就可以将  textarea  中的已有的内容导入到编辑器中，或者将编辑好的内容更新到  LinkedField  中。那  FCKEditor  中的内容是何时保存到对应的  LinkedField  中去的呢？开始我没有看源码，以为是在  FCKEditor  中的内容发生改变的时候同时更新  LinkedField  的，后来发现不是，如果是这样的话，那我们就可以很容易在  ajax  中使用  FCKEditor  了。那到底是什么时候做到与  LinkedField  同步的呢？答案肯定是在  form  执行  submit  事件之前，要在  submit  之前做到更新唯一的方式就是通过  attachEvent  方式将更新的回调函数绑定到  onsubmit  事件上，然后通过一定的方式在  submit  之前调用绑定的函数。因此就在  FCKEditor  提供的核心  js  文件中查找  onsubmit，后来在  fckeditorcode_ie.js  文件找到了  onsubmit  关键字（这里不得不提到的一点，FCKEditor  虽然做到了开源，但是对于他们的  javascript  源代码还是有所保留的，里面的很多核心  js  文件都进行了混淆重排，不过这个也不能怪人家不厚道，为了方便查看源代码，吐血推荐采用  MyEclipse  的  document format  功能进行格式化处理，这样基本上可以对里面的结构一目了然了）。

相关代码如下，首先是在  FCKEditor  初始化的时候：

代码

1.      function FCK_EditingArea_OnLoad() {   

2.          FCK.EditorWindow = FCK.EditingArea.Window;   

3.          FCK.EditorDocument = FCK.EditingArea.Document;   

4.          FCK.InitializeBehaviors();   

5.          FCK.OnAfterSetHTML();   

6.          if (FCK.Status != FCK_STATUS_NOTLOADED) {   

7.              return;   

8.          }   

9.          FCK.ResetIsDirty();   

10.      FCKTools.AttachToLinkedFieldFormSubmit(FCK.UpdateLinkedField); // 开始做绑定   

11.      FCK.SetStatus(FCK_STATUS_ACTIVE);   

12.  }   

然后是  submit  提交前的处理：

代码

1.      FCKTools.AttachToLinkedFieldFormSubmit = function (A) {   

2.          var B = FCK.LinkedField.form;   

3.          if (!B) {   

4.              return;   

5.          }   

6.          if (FCKBrowserInfo.IsIE) {   

7.              B.attachEvent("onsubmit", A); // 将更新处理绑定到  form  的  onsubmit  事件上   

8.          } else {   

9.              B.addEventListener("submit", A, false);   

10.      }   

11.      if (!B.updateFCKeditor) {   

12.          B.updateFCKeditor = new Array();   

13.      }   

14.      B.updateFCKeditor[B.updateFCKeditor.length] = A;   

15.      if (!B.originalSubmit && (typeof (B.submit) == "function" || (!B.submit.tagName && !B.submit.length))) {   

16.          B.originalSubmit = B.submit;   

17.          B.submit = FCKTools_SubmitReplacer;   

18.      }   

19.  };   

真正更新处理代码如下：

代码

1.      FCK.UpdateLinkedField = function () {   

2.          FCK.LinkedField.value = FCK.GetXHTML(FCKConfig.FormatOutput); // 将FCKEditor  编辑的内容取出来，这里是我们关心的重点   

3.          FCK.Events.FireEvent("OnAfterLinkedFieldUpdate");   

4.      };   

OK，大致过程我们基本上已经了解了，至于  FCKEditor  是如何在执行  onsubmit  之前执行绑定的更新处理的，暂且不表。

不过这里对  FCKEditor  的几个对象类需要了解一下，一个是  FCKConfig（保存一些相关的配置信息），FCK（取编辑器中编辑的内容需要用到的）。这些类都存活在编辑器所在的  IFrame  页面之中，在  LinkedField  所在的页面是无法访问到的。

下面是我们的使用代码，这里是通过  js  创建  FCKEditor  实例的方式。

首先定义一个全局的  FCKEditor  对象：

代码

1.      var oFCKEditor = null;   

在页面初始化之后(一般是在  body  的  onload  事件中完成)创建  oFCKEditor  对象

代码

1.      oFCKeditor = new FCKeditor( 'frmEntity_editor_content'/*LinkedField元素id*/, '100%;','400px', 'Default') ;   

2.      oFCKeditor.BasePath = "${request.getContextPath()}/editor/" ;   

3.      oFCKeditor.ReplaceTextarea() ;   

接下来是在执行  ajax  请求提交前的处理：

代码

1.      var inputElementId = "frmEntity_editor_content"; // LinkedField元素id   

2.      var frameElement = eval(inputElementId + "___Frame"); // 用来嵌入FCKEditor的IFrame的id   

3.      var inputElement = eval(inputElementId);   

4.      inputElement.value = frameElement.window.FCK.GetXHTML(frameElement.window.FCKConfig.FormatOutput); // 取得  FCKEditor  中的内容同步到  LinkedField  中去   

5.      // 收集提交内容，执行  ajax  请求   

6.      ....   

这个就是我的整合过程，其实还是挺简单的，不过碰到一个问题，就是在打开页面之后，输入焦点总是停留在  FCKEditor  的编辑区里面，而  FCKEditor  自己提供的例子里面不会出现这个情况，写法也没有什么区别，不知道问题出在哪里，有知道原因的朋友告知一声。