jQuery exInPlace Editor にリスト編集モード等の機能追加をしました

更新履歴

2011-07-05: Ver 0.1.5.1
リスト編集モードで値未入力時のラベル表示不具合等を修正しました
2011-04-29: Ver 0.1.4.1
編集値の変換処理の不具合を修正しました

久しぶりのエントリです。

仕事でちょっと必要になったので、以前紹介した In-Place-Editor の jQuery プラグイン（In-Place-Editor (その場で編集する UI) の jQuery プラグインを書いてみた - Cyokodog::Diary）に機能追加をしました。

リスト形式での編集機能

テキストエリア内の箇条書きをリスト形式に変換します。

TEXTAREA 要素にプラグインを適用する場合

テキストエリアに対し、convertCR パラメータに li を指定して exInPlaceEditor() メソッドを適用します。

<textarea>
jQuery()
jQuery.noConflict()
jQuery.sub()
jQuery.when()
</textarea>

$('textarea').exInPlaceEditor({
    convertCR : 'li'
});

テキストエリア内の改行が li 要素に変換されるようになります。

Demo

UL 要素にプラグインを適用する場合

ul 要素に exInPlaceEditor() メソッドを適用します。

<ul>
    <li>jQuery()</li>
    <li>jQuery.noConflict()</li>
    <li>jQuery.sub()</li>
    <li>jQuery.when()</li>
</ul>

$('ul').exInPlaceEditor();

テキストエリアによる編集が可能になります。改行が li 要素に変換されます。

Demo

HTML 編集モードにおける自動改行

htmlEditor パラメータに true を指定すると HTML 編集モードになる機能があります。このモードの場合、純粋な HTML の入力モードのため p 要素や br 要素等の改行も意識して入力する必要がありました。

いざ使ってみるとこれが結構面倒だったので、改行コードを convertCR パラメータで指定した要素（br 又は p）に自動置換するようにしました。

自動置換したくない場合は、htmlEditorAutoConvertCR パラメータに false を指定します。

Demo

ダウンロード

こちらからどうぞ

Permalink | コメント(3) | トラックバック(2) | 10:28

コメントを書く

cutsea110 2011/06/17 09:56 exInPlaceEditor使わせてもらってます。

要望なんですが、テキストに入力しているデータとは別に表示モードでのa.ex-ipe-labelの内容を書き換えたいと思っています。
onsaveでhookしたつもりがその中のcommitで改めて書き直されてしまいますね。
表示を変更できるようにapiを変更していただくか、commitの後に呼ばれるメソッドを追加していただけないでしょうか？
今手元ではoncommitを追加してcommit後に呼ばれるcallback関数をhookできるようにしてやってます。

$ git diff
diff --git a/js/jquery.exinplaceeditor.0.1.4.1.js b/js/jquery.exinplaceeditor.0.1.4.1.js
index 922496b..9a14a41 100644
--- a/js/jquery.exinplaceeditor.0.1.4.1.js
+++ b/js/jquery.exinplaceeditor.0.1.4.1.js
@@ -349,9 +349,6 @@
c.editor.val(o.getValue());
c.label.html(o._INPUTtoHTML());
o.hideEditor(p);
- /* Hack */
- c.oncommit.call(o, o);
- /* Hack */
return o;
},
trimText: function (text) {
@@ -480,9 +477,6 @@
dataSelect: false,
effect: 'fast', //or slow or 'other easing name' or false
oninit: function () { },
- /* Hack */
- oncommit: function () { },
- /* Hack */
onsave: function () { }
}
$.fn.exInPlaceEditor = function (option) {

他になにかいい方法があればご指摘ください。