« | »

12月08日 

javascript

覚え書き

SexyLightbox2とTinyMCEとjQuery

部屋とYシャツと私。
ドツボと原因究明とシステム作り直し。orz

SexyLightbox2（以下SLB）はajaxでhtmlを引っ張ってきてゴニョゴニョを勝手にやってくれるので、最近SLBどっぷりだしシステムにも組み込んじゃえ、と今作ってるシステムのフォームをajax駆使して表示してみたりしたらセキュリティの問題も（モロCSRF弱くなる）出てきて、対応策考えたり（ワンタイムトークン仕込んだり）で結構面白いことになってるんだけど、バッチリはまりましたよ、罠に。。。


入力フォームのtextareaにリッチエディタを付けましょう、とのクライアントとの会話。
TinyMCE組み込んじゃえばいいんでしょ？前にもやってるから余裕余裕。ajaxで読み込んだ後に仕込めばいいんじゃんよ？とか思ってたんだけど…

罠1。
Ajaxで読み込んだ要素に対してTinyMCEを適用させる場合、ちょっといつもとは勝手が違う。しかも最初に参照した記事は情報が古い…ということで調べた結果を覚え書き。

  1. ページに以下のコードを組み込みますよ。これはいつものTinyMCE組み込みに似た感じね。
    tinyMCE.init({mode:"none"}) ;オプションなんかの設定もここでしておこう。
  2. ajaxで要素を引っ張ってきてDOMツリーへ参加させちゃいます。例えばその要素の中に<textarea id="desc"></textarea>的な物を含ませておいたとします。
  3. tinyMCEをそのテキストエリアに適用させます。
    tinyMCE.execCommand('mceAddControl', false, 'desc') ;第3引数で指定したIDをtinyMCEが探しに行って、その要素に適用してくれますよ。
  4. で、編集やらなんやら終わった後に、追加したテキストエリアを抹殺してしまう前に
    tinyMCE.execCommand('mceRemoveControl', false, 'desc') ;として、解放してあげましょう。

ということだったんですが…

罠2。
SLBで読み込んできた要素が、どうもDOMにぶら下がってない？ちゃんと追加されてるかどうか調べるためにdocument.getElementById('desc') ;
で探ってもundefined…orz
タイミングの問題かと思って、色々トラップ仕掛けてみるもいっこうに罠に掛かってくれず。

ここで一旦ふて寝（シエスタ）して頭をリフレッシュ。今度はjQueryで要素を引っ張ってきてDOMへぶら下げてみる。

成功する。全く問題なく。

jQuery.ajax({
    dataType: 'html',
    url: 'get.php',
    function(data) {
        jQuery('#disp').append(data) ;
        tinyMCE.execCommand('mceAddControl', false, 'desc') ;
    }
}) ;

SLBはmootoolsがベースで、読み込んだ要素もmootoolsに処理させてるみたい。どうもそこら辺が原因らしい。

mootoolsのソースも読み解いていけば解決策が見えてくるのかもしれないけど、JSerでも無いしこれ以上本筋から離れた作業するヒマは無いので、ここいらで止めときます。
ついでに、SLB使ったり使わなかったり中途半端が気持ち悪いので、今までダイアログで開いてた箇所を全てjQueryで置き換える予定。

あぁぁぁぁぁぁぁぁぁぁぁぁorz

ま、気を取り直してダッシュしますか。。。

追記）
データ挿入にもajaxで行う場合、

var desc = jQuery('textarea[@name=desc]').val() ;

というのが効かなくなるので、

var desc = tinyMCE.get('desc').getContent() ;

とする必要があります。tinyMCEのバージョンが3.xの場合、

var desc = tinyMCE.getContent('desc') ;

です。

1 コメント