jQueryのSortableとWYSIWYGエディタを組み合わせるとFirefoxでエディタの値がクリアされる件について

技術関係

表題のようなことをやろうとしたら表題のような現象に鉢合ったわけで。

やろうとしたこと

複数のWYSIWYGエディタ化したTextAreaをドラッグ&ドロップで並び替えられればイイよね的な話だったのですが、Firefoxで問題が発生。
入力までは出来るのですが、並べ替えを行った時にエディタの中身が空になってしまう。Chromeもダメ。IE6だと動いている。珍しい。

無理矢理Sortableで移動させる直前にエディタ部分を退避させて、移動直後に書き戻せばいいやと思うもあえなく失敗。

Firefoxのバグっぽい?

で、ちょっと調べてみると以下のような話を発見して、あーなるほどと納得してしまったわけです。要するに、WYSIWYGエディタはバックグラウンド側でiFrameを使っているわけですが、FirefoxだとiFrameを含む要素を移動させたりした場合に、iFrameの中身が空になってしまうバグがあるんじゃねぇの?といった話。

javascript – jQuery UI sortable, each sortable div contains an iFrame gets refreshed in FF3 but not in IE7 – Stack Overflow>
This is a bug in FF (and apparently Safari 3.5/Win and Opera 9.5/Win): iframes reload if moved in the DOM treh. (jQuery sortable moves the node in the DOM tree when you drop it).

See https://bugzilla.mozilla.org/show_bug.cgi?id=254144.
<<

ついでに調べていると、ちょっと違うけど似たような話も発見。おそらくこれも背景は同じような話だと思われるわけで。
http://questionbox.jp.msn.com/qa5348508.html

とりあえず、回避はできたけど

そこでお試しがてらiFrameを使用しないNicEditというJavascriptのWYSIWYGエディタ用ライブラリで試したところ、案の定問題なくSortableが動きます。
なるほどね。ただ、今回はちょっと望む感じじゃなかったので、これは廃案。

で、どうしたの?

Firefoxで対応出来ていないというのはあまりおもしろくないので、実装というか方針の変更を強いられた次第。

なんか解決策はあるのだろうか?

タイトルとURLをコピーしました