Subscribed unsubscribe Subscribe Subscribe

WYMeditorとjQuery

WYMeditorが0.3系でjQueryを使うようになったので、ちょっと試してみた。
0.3beta-1を落として試せばフォームの挙動はわかるものの、
フォームからデータをポストする肝心のやりかたが不明。


サイトをあちこち見て回ったら、
jQueryは最新じゃないといけないとかあるようです。
一足飛びにrevision 336で試してみた。


お手軽にhttp://trac.wymeditor.org/trac/browser/trunk
からzipアーカイブを取得しました。


ステップ1. とりあえず、フォームを定義する。
hiddenでtext1とかをデータの格納先として用意しておきます。

<form method="post" action="index.php" name='hoge'>
<textarea class="wymeditor"></textarea>
<input type="submit" class="wymupdate" />
<input type="hidden" name="text1" />
</form>
<form method="post" action="index.php" name='hoge'>
<textarea class="wymeditor"></textarea>
<input type="submit" class="wymupdate" />
<input type="hidden" name="text2" />
</form>

ステップ2.

var $j = jQuery.noConflict();

$j(function() {
  $j('.wymeditor').wymeditor({
  //options
  sUpdateSelector: ".wymupdate",
  sUpdateEvent: "click",

で、sUpdateSelectorとsUpdateEventを追記しておきます。
とりあえず、サンプルのHTMLを書き換えておきました。

これは、更新を実行するハンドラはwymupdateクラスのエレメントがクリックされたら
実行されますよ、ということです。
つまり、submitボタンを実行したときが該当します。


ステップ3.

で、$j(function()の最後の方に以下を加える。

$j('.wymupdate').click(function() {
  var msg = $j(this).siblings('.wymeditor').val();
  $j('input:hidden').val(msg);
});

テンプレートのwymupdateクラスとクリックしたときのアクションを記述します。
やっているのはtextareaの値を取得して、hiddenに設定しなおす、ということです。

これで、index.phpでは$_POST経由で値を取得することができます。
あー疲れた。