|
|
至于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;
}
};
jsp技術：AJAX FCKEditor Rich Editor整合篇第1/2頁，轉載需保留來源！
鄭重聲明：本文版權歸原作者所有，轉載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯系我們修改或刪除，多謝。
