AJAX FCKEditor Rich Editor整合篇第1/2頁(yè)
更新時(shí)間:2008年09月12日 09:40:38 作者:
Rich Editor是我們?cè)赪eb應(yīng)用經(jīng)常使用的一種客戶端控件,目前網(wǎng)上開源的、收費(fèi)的也比較多,在對(duì)網(wǎng)上各種富文本編輯器進(jìn)行了一系列比較之后,我最終選擇了FCKEditor
(http://www.fckeditor.net, JavaEye的編輯器也是采用的FCKEditor,XX所見略同?呵呵),它OpenSource(免費(fèi)啊,可以直接改源代碼啊,呵呵),功能強(qiáng)大(幾乎就是一個(gè)office word的web版),提供了對(duì)各種服務(wù)器端的支持(雖然它完全是一個(gè)純客戶端的東東, 但是目前提供了與.NET, PHP, Java, Coldfusion, Perl, Lasso, Python各種服務(wù)器端腳本的緊密集成),支持國(guó)際化(漢化做的非常棒),可更換皮膚(office 2000的風(fēng)格簡(jiǎn)直可以亂真),內(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í)候,都會(huì)新建一個(gè)IFrame,然后各種toolbar和編輯區(qū)都塞到這個(gè)IFrame中去了,在IFrame外面必須有一個(gè)對(duì)應(yīng)的input元素(這個(gè)一般是一個(gè)textarea,F(xiàn)CKEditor中稱之為L(zhǎng)inkedField),這樣就可以將textarea中的已有的內(nèi)容導(dǎo)入到編輯器中,或者將編輯好的內(nèi)容更新到LinkedField中。那FCKEditor中的內(nèi)容是何時(shí)保存到對(duì)應(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雖然做到了開源,但是對(duì)于他們的javascript源代碼還是有所保留的,里面的很多核心js文件都進(jìn)行了混淆重排,不過這個(gè)也不能怪人家不厚道,為了方便查看源代碼,吐血推薦采用MyEclipse的document format功能進(jìn)行格式化處理,這樣基本上可以對(duì)里面的結(jié)構(gòu)一目了然了)。
相關(guān)代碼如下,首先是在FCKEditor初始化的時(shí)候:
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;
}
};
至于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í)候,都會(huì)新建一個(gè)IFrame,然后各種toolbar和編輯區(qū)都塞到這個(gè)IFrame中去了,在IFrame外面必須有一個(gè)對(duì)應(yīng)的input元素(這個(gè)一般是一個(gè)textarea,F(xiàn)CKEditor中稱之為L(zhǎng)inkedField),這樣就可以將textarea中的已有的內(nèi)容導(dǎo)入到編輯器中,或者將編輯好的內(nèi)容更新到LinkedField中。那FCKEditor中的內(nèi)容是何時(shí)保存到對(duì)應(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雖然做到了開源,但是對(duì)于他們的javascript源代碼還是有所保留的,里面的很多核心js文件都進(jìn)行了混淆重排,不過這個(gè)也不能怪人家不厚道,為了方便查看源代碼,吐血推薦采用MyEclipse的document format功能進(jìn)行格式化處理,這樣基本上可以對(duì)里面的結(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;
}
};
相關(guān)文章
jsp中select的onchange事件用法實(shí)例
這篇文章主要介紹了jsp中select的onchange事件用法,以實(shí)例形式較為詳細(xì)的分析了JSP數(shù)據(jù)庫(kù)查詢、遍歷及結(jié)合JavaScript響應(yīng)鼠標(biāo)事件處理select相關(guān)技巧,需要的朋友可以參考下2015-10-10JSP Spring ApplicationContext的國(guó)際化支持
這篇文章主要介紹了JSP Spring ApplicationContext的國(guó)際化支持的相關(guān)資料,需要的朋友可以參考下2017-04-04詳解Struts2中對(duì)未登錄jsp頁(yè)面實(shí)現(xiàn)攔截功能
這篇文章主要介紹了Struts2中對(duì)未登錄jsp頁(yè)面進(jìn)行攔截功能的實(shí)現(xiàn),在演示源碼的同時(shí)對(duì)步驟和原理進(jìn)行了分析,具有一定參考價(jià)值,需要得朋友可以了解下。2017-09-09Http請(qǐng)求長(zhǎng)時(shí)間等待無結(jié)果返回解決辦法
這篇文章主要介紹了Http請(qǐng)求長(zhǎng)時(shí)間等待無結(jié)果返回解決辦法的相關(guān)資料,需要的朋友可以參考下2017-04-04Jsp+Servlet實(shí)現(xiàn)購(gòu)物車功能
這篇文章主要為大家詳細(xì)介紹了Jsp+Servlet實(shí)現(xiàn)購(gòu)物車功能,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-08-08