快捷導(dǎo)航

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

更新時(shí)間：2008年09月12日 09:40:38 作者：

Rich Editor是我們在Web應(yīng)用經(jīng)常使用的一種客戶端控件，目前網(wǎng)上開源的、收費(fèi)的也比較多，在對網(wǎng)上各種富文本編輯器進(jìn)行了一系列比較之后，我最終選擇了FCKEditor

（http://www.fckeditor.net， JavaEye的編輯器也是采用的FCKEditor，XX所見略同？呵呵），它OpenSource(免費(fèi)啊，可以直接改源代碼啊，呵呵)，功能強(qiáng)大（幾乎就是一個(gè)office word的web版），提供了對各種服務(wù)器端的支持（雖然它完全是一個(gè)純客戶端的東東, 但是目前提供了與.NET, PHP, Java, Coldfusion, Perl, Lasso, Python各種服務(wù)器端腳本的緊密集成），支持國際化（漢化做的非常棒），可更換皮膚（office 2000的風(fēng)格簡直可以亂真），內(nèi)嵌文件上傳（Java版本支持這個(gè)），保持一定的更新狀態(tài)（目前版本為2.3.2），如此等等。當(dāng)然它還有N多功能，不過我還沒仔細(xì)去研究，如果有哪位用到的，可以告知一二。

至于FCKEditor的各種用法我就不在這里一一列舉，網(wǎng)上有很多相關(guān)的文章，它也自帶了不錯(cuò)的sample，可以非常容易加入到我們自己的項(xiàng)目中去。

不過在Ajax應(yīng)用中如何使用FCKEditor控件呢？這個(gè)FCKEditor好像沒有提供相應(yīng)的答案，因?yàn)锳jax都是采用的無刷新提交，而FCKEditor只能在Form提交方式下使用，為什么這樣說呢，那我們還得從FCKEditor的執(zhí)行流程說起。

FCKEditor的編輯器實(shí)際上是一個(gè)IFrame，每次在創(chuàng)建一個(gè)FCKEditor實(shí)體的時(shí)候，都會新建一個(gè)IFrame，然后各種toolbar和編輯區(qū)都塞到這個(gè)IFrame中去了，在IFrame外面必須有一個(gè)對應(yīng)的input元素（這個(gè)一般是一個(gè)textarea，F(xiàn)CKEditor中稱之為LinkedField），這樣就可以將textarea中的已有的內(nèi)容導(dǎo)入到編輯器中，或者將編輯好的內(nèi)容更新到LinkedField中。那FCKEditor中的內(nèi)容是何時(shí)保存到對應(yīng)的LinkedField中去的呢？開始我沒有看源碼，以為是在FCKEditor中的內(nèi)容發(fā)生改變的時(shí)候同時(shí)更新LinkedField的，后來發(fā)現(xiàn)不是，如果是這樣的話，那我們就可以很容易在ajax中使用FCKEditor了。那到底是什么時(shí)候做到與LinkedField同步的呢？答案肯定是在form執(zhí)行submit事件之前，要在submit之前做到更新唯一的方式就是通過attachEvent方式將更新的回調(diào)函數(shù)綁定到onsubmit事件上，然后通過一定的方式在submit之前調(diào)用綁定的函數(shù)。因此就在FCKEditor提供的核心js文件中查找onsubmit，后來在fckeditorcode_ie.js文件找到了onsubmit關(guān)鍵字（這里不得不提到的一點(diǎn)，F(xiàn)CKEditor雖然做到了開源，但是對于他們的javascript源代碼還是有所保留的，里面的很多核心js文件都進(jìn)行了混淆重排，不過這個(gè)也不能怪人家不厚道，為了方便查看源代碼，吐血推薦采用MyEclipse的document format功能進(jìn)行格式化處理，這樣基本上可以對里面的結(jié)構(gòu)一目了然了）。

相關(guān)代碼如下，首先是在FCKEditor初始化的時(shí)候：

復(fù)制代碼代碼如下:

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提交前的處理：

復(fù)制代碼代碼如下:

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