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

來源:互聯網
上載者:User
(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/2頁  12下一頁閱讀全文
相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.