scriptaculousのInPlaceEditorを使う

JavaScript

最近よく目にする、Ajaxでテキストをクリックすると編集できるようになるやつを付けて欲しいという要望が来ていたので、scriptaculousのInPlaceEditorを試しに使ってみました。使い方自体は簡単なので、この辺を参考にしていただくとして、、引っかかった（引っかかり中の）点について書いておきたいと思います。

  1. textareaの場合の改行<=>brタグの置換
  2. テキストが空の場合
  3. ログインしていない場合
  4. 文字コードの問題

改行<=>brタグの置換

今回InPlaceEditorを使うにあたって調べたところ、改行<=>brタグの置換はInPlaceEditorがやってくれるような情報があったのですが、現在は置換してくれないようです*1。
とりあえず、↓のような感じで編集モードのON/OFFの際に置換するようにしました（置換処理はもっとちゃんと書く必要があると思います）。

new Ajax.InPlaceEditor(
　　…
　onEnterEditMode: function(){
　　obj = $('targetText');
　　obj.innerHTML = obj.innerHTML.replace(/<br\/*>\n/g, "\n");
　},
　onLeaveEditMode: function(){
　　obj = $('targetText');
　　obj.innerHTML = obj.innerHTML.replace(/\n/g, "<br/>\n");
　}
　　…
);

【追加】
これだとFirefoxでは動いていたのですが、IEではうまく置換できなかったです。私の小手先のJavaScriptでは厳しそうなので、編集後のデータの表示についてはサーバ側で置換したデータを返すようにしてしまいました。編集モードに入る際のBR->改行への置換については、InPlaceEditorのgetTextを拡張してそこで置換するようにしました。

テキストが空の場合

編集したいテキストが空の場合は、”ここをクリックすると入力できます”みたいなメッセージを出したいですが、方法がscriptaculousのwikiに書いてある方法（下のほうの"Small extension to editor to add a text in case field is empty."という部分）を試したら簡単にできました。

ログインしていない場合

とりあえず、サーバサイドの処理でログインしていない状態ではInPlaceEditor自体を表示しないようにはしましたが、編集した内容を保存する時点でログアウトしてしまっている場合もあると思います。私のところでは、ServletのFilterでログインしていないとエラーページに遷移させていますが、これだとInPlaceEditorがサーバから返答を受け取った際には、onFailureは呼ばれません（エラーページの内容が編集可能テキストの部分に出ちゃってます）。

【追加】
エラーページに遷移させる際にステータスコード(401)を指定すればonFailureが呼ばれました。以下の様な感じにしました。ipe,transportはそれぞれInPlaceEditorとAjaxRequestのインスタンスが渡されます。

new Ajax.InPlaceEditor(
　　…
	onFailure: function(ipe,transport) { // 失敗時に呼ばれるメソッド 
	      	if(transport.status==401){
	       		// 認証エラーの場合
	       		alert("ログインしていません。");
	       	}
	       	else{
	       		// それ以外のエラーの場合
	       		alert("登録に失敗しました。");
	      	}
	}, 
　　…
);

文字コードの問題

ありがちな問題なのですが、ひさびさに出あってまだ未解決です。InPlaceEditorではUTF-8でサーバに送信するみたいです。

*1:scriptaculousに含まれるcontrol.js を見ると編集用のフォームを作成するところで、"// No HTML breaks conversion anymore"という記載があるので。。