AJAX FCKEditor Rich Editor整合篇第1/2页

（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;
}
};

1