AJAX一统天下之Rich Editor整合篇

     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初始化的时候：

function FCK_EditingArea_OnLoad() {
	FCK.EditorWindow = FCK.EditingArea.Window;
	FCK.EditorDocument = FCK.EditingArea.Document;
	FCK.InitializeBehaviors();
	FCK.OnAfterSetHTML();
	if (FCK.Status != FCK_STATUS_NOTLOADED) {
		return;
	}
	FCK.ResetIsDirty();
	FCKTools.AttachToLinkedFieldFormSubmit(FCK.UpdateLinkedField); // 开始做绑定
	FCK.SetStatus(FCK_STATUS_ACTIVE);
}

然后是submit提交前的处理：

FCKTools.AttachToLinkedFieldFormSubmit = function (A) {
	var B = FCK.LinkedField.form;
	if (!B) {
		return;
	}
	if (FCKBrowserInfo.IsIE) {
		B.attachEvent("onsubmit", A); // 将更新处理绑定到form的onsubmit事件上
	} else {
		B.addEventListener("submit", A, false);
	}
	if (!B.updateFCKeditor) {
		B.updateFCKeditor = new Array();
	}
	B.updateFCKeditor[B.updateFCKeditor.length] = A;
	if (!B.originalSubmit && (typeof (B.submit) == "function" || (!B.submit.tagName && !B.submit.length))) {
		B.originalSubmit = B.submit;
		B.submit = FCKTools_SubmitReplacer;
	}
};

真正更新处理代码如下：

FCK.UpdateLinkedField = function () {
	FCK.LinkedField.value = FCK.GetXHTML(FCKConfig.FormatOutput); // 将FCKEditor编辑的内容取出来，这里是我们关心的重点
	FCK.Events.FireEvent("OnAfterLinkedFieldUpdate");
};

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

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

下面是我们的使用代码，这里是通过js创建FCKEditor实例的方式。
首先定义一个全局的FCKEditor对象：

var oFCKEditor = null;

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

oFCKeditor = new FCKeditor( 'frmEntity_editor_content'/*LinkedField元素id*/, '100%;','400px', 'Default') ;
oFCKeditor.BasePath	= "${request.getContextPath()}/editor/" ;
oFCKeditor.ReplaceTextarea() ;

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

var inputElementId = "frmEntity_editor_content"; // LinkedField元素id
var frameElement = eval(inputElementId + "___Frame"); // 用来嵌入FCKEditor的IFrame的id
var inputElement = eval(inputElementId);
inputElement.value = frameElement.window.FCK.GetXHTML(frameElement.window.FCKConfig.FormatOutput); // 取得FCKEditor中的内容同步到LinkedField中去
// 收集提交内容，执行ajax请求
....

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

评论

13 楼 ahut9923 2007-02-07  

zexunlee 写道

不是切换链接。是FCKEditor中的"代码"这个按钮，这个按钮显然不是FCKEditor自带的，而是robbin他们改造了FCKEditor之后增加进去的。我现在就是需要王FCKEditor中增加一个自定义的按钮。

源码 这个按钮不能随意开放,高手写段js代码就可以产生攻击.

12 楼 ahut9923 2007-02-07  

macrochen 写道

jackhlp 写道

嗯，FCKeditor确实不错，可以说是在线编辑器中最好的了，我前段时间也在看它，也错了一个像javaeye现在这样的一个插件，感觉很不错，呵呵

希望更多的朋友总结一些使用FCKEditor的经验，呵呵。

我最近一直在用FCKEditor ,感觉还不错.不知道LZ要哪方面的经验呢?

FCKEditor写的很完美,我试图修改了好多次都没有修改成功.

不知道可有人知道用Fckeditor实现如下效果:

  开始写内容时就自动保存所写内容,实现Ajax,当提交时自动删除保存的内容

期待中....................

11 楼 sp42 2007-02-07  

KFCEditor loading太慢，想知道一些优化加速技巧

10 楼 zexunlee 2007-02-06  

不是切换链接。是FCKEditor中的"代码"这个按钮，这个按钮显然不是FCKEditor自带的，而是robbin他们改造了FCKEditor之后增加进去的。我现在就是需要王FCKEditor中增加一个自定义的按钮。

9 楼 macrochen 2007-02-06  

zexunlee 写道

我看JavaEye里在使用FCKEditor时，加进去了一个自定义的按钮，我试用了一下FCKEditor，尝试着也加一个自定义按钮进去，一直没有成功。不知robbin是怎么做的，能否透露一二？楼主要是清楚也请指导一下。

你指的是BBCode和RichEditor之间的切换链接吗？如果是这个的话，应该是重新从后台请求了一次，因此使用BBCode和RichEditor的是两个不同的编辑页面。

8 楼 zexunlee 2007-02-06  

我看JavaEye里在使用FCKEditor时，加进去了一个自定义的按钮，我试用了一下FCKEditor，尝试着也加一个自定义按钮进去，一直没有成功。不知robbin是怎么做的，能否透露一二？楼主要是清楚也请指导一下。

7 楼 mltp 2007-02-05  

引用

jackhlp 写道
嗯，FCKeditor确实不错，可以说是在线编辑器中最好的了，我前段时间也在看它，也错了一个像javaeye现在这样的一个插件，感觉很不错，呵呵

希望更多的朋友总结一些使用FCKEditor的经验，呵呵。

6 楼 macrochen 2007-01-11  

jackhlp 写道

嗯，FCKeditor确实不错，可以说是在线编辑器中最好的了，我前段时间也在看它，也错了一个像javaeye现在这样的一个插件，感觉很不错，呵呵

希望更多的朋友总结一些使用FCKEditor的经验，呵呵。

5 楼 macrochen 2007-01-11  

jianfeng008cn 写道

我也用过感觉很不错，不过要注意的是，不能在弹出窗口中使用哦，因为要加载的东西比较多，而且有些是弹出窗口不支持的，feckeditor和ajax没什么关系的呀？我感觉你说得功能只要在外层做些处理就可以，没必要修改其代码。

多谢提醒，大部分情况下都是采用form方式来提交FCKEditor编辑的内容，只是在ajax应用中使用XMLHttp提交的话需要调用其他的API来取得编辑器中的内容，这里我也没有修改源代码的。

4 楼 macrochen 2007-01-11  

oznyang 写道

lz应该去官方下载fck的包，在FCKeditor\editor\_source里面包含所有的js源码，还有注释。
取内容的话直接FCKeditorAPI.GetInstance('frmEntity_editor_content').GetXHTML(FCKConfig.FormatOutput);
还有我觉得没必要管onsubmit,直接处理提交的onclick不是更easy?

多谢oznyang提醒，我当时没有注意到_source这个下面的内容，果然有相关的接口啊，当时就觉得纳闷，FCKEditor提供的API咋就那么少呢，原来是我没有找到地方。
我是没有管onsumbit，只是因为我不是使用form提交的，所以在onclick之间必须将编辑器中编辑的内容取出来，其他的我就没有做什么了。

3 楼 jianfeng008cn 2007-01-11  

我也用过感觉很不错，不过要注意的是，不能在弹出窗口中使用哦，因为要加载的东西比较多，而且有些是弹出窗口不支持的，feckeditor和ajax没什么关系的呀？我感觉你说得功能只要在外层做些处理就可以，没必要修改其代码。

2 楼 oznyang 2007-01-10  

lz应该去官方下载fck的包，在FCKeditor\editor\_source里面包含所有的js源码，还有注释。
取内容的话直接FCKeditorAPI.GetInstance('frmEntity_editor_content').GetXHTML(FCKConfig.FormatOutput);
还有我觉得没必要管onsubmit,直接处理提交的onclick不是更easy?

1 楼 jackhlp 2007-01-10  

嗯，FCKeditor确实不错，可以说是在线编辑器中最好的了，我前段时间也在看它，也错了一个像javaeye现在这样的一个插件，感觉很不错，呵呵