2008年7月30日 星期三

解決 jQuery 與 TinyMCE 不合的處置方式

大致作好了 attributeManager 的主功能,老大初步測試也OK了,將它加入SVN。

過了2天,老大將原本內嵌在 xt:Commerce 的 FCK_Editor (Web-browser WYSIWYG),置換成TinyMCE,災難開始...

整 個 attributeManager 開始不靈光了,只要作第2次的 action 網頁就會 redirect 並且當掉(group price 也用了 pquery,它的狀況亦同),一開始還以為我加入到 SVN 的程序有那些檔案沒作好,接著再懷疑這期間 SVN 的 update 是不是有那裡是影響的關鍵,接著再追蹤 jQuery 的版本與 pquery 的相容度,接著比對各 js 的排列順序,,就這樣搞了快一周...,老大等到快不耐煩了,我的耐性及自信也快被磨到沒了...

在不得已之下,只好作阿呆地毯式偵錯法,將整個 categories.php 的相關連的檔案全部翻過來一遍,刪掉任何懷疑的程式段落,refresh 網頁,不斷的重覆執行會出錯的動作...

莫 非定律始終在你我的生活中,昨天大姊快臨盆了,因為姊夫要執勤,call father 幫她搬東西到新房子去要安靜的準備坐月子,就是這麼剛好,當天就生了...,而這個 TinyMCE 我一開始也曾想過倒底是不是它,但又心念一改,認為它算是很穩定的套件,又是老大放上去的,絕對沒問題,事實就變成絕對是這裡出問題。

立即向老大報告之後,同時搜尋了相關的資料,找到了以下2筆,但經測試仍是不行->

1.http://www.nofluffjuststuff.com/blog/brian_pontarelli/2007/09/how_to_get_jquery_and_tinymce_to_work.html
2.http://dev.jquery.com/wiki/Plugins/tinyMCE

老大果然是老大,他提到 wordpress 也是 jQuery + tinyMCE ,他們就沒有問題?
這 一句話如夢初醒,立即挖開 wordpress 來看,同時再看 Drupal 對於 jQuery 的支援,不看還好,一看...,原來他們都只將 jQuery 當作UI效果使用而已,我竟然取用了版本還沒穩定的 pquery (有人批評它很爛,但反我覺得它很讚,可惜還沒領悟而已),呼救google大神也沒用...

靈感果然常來自於眼睛閉起來冥想的瞬間,正準備明天再戰,上了床不到10分鐘突然某一段曾解決另一個問題的程式碼如現正流行的 「Tag雲」飄了上來,對哦!問題就在這裡!!

原因及解決:
1. 因為 tinyMCE 是使用 Prototype , 先天上與 jQuery 不合是必然的,所以必須使用 jQuery.noConflict(); 避免兩者的碰撞。
2. 因為我大量的使用 pquery 的 remote_function(),卻忽略了其產生重覆呼叫的問題(幸好有Firebug加持,才那麼容易發現重覆呼叫),所以使用了 if(!$_GET['...'] ) 讓 tinyMCE.init() 避免因為 remote_function 而重覆呼叫。

希望這篇碎碎念的文章可以幫得上後來會接觸到這領域的朋友^^