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

jQuery

更新履歴

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

ダウンロード

こちらからどうぞ