2014年5月8日木曜日

NicEdit: テキストの変更をリアルタイムに監視する

JavaScript の WISYWIG エディタ NicEdit は MIT ライセンスで使用できます。
リアリタイムに編集状態を取得したい場合は keyup や click イベントを使用します。

<textarea> 要素を NicEdit で WYSIWYG エディタを生成した場合、
テキストを入力する領域が <textarea> の1つ上に生成され、
太字や斜字などのボタンが更にその1つ上に生成されます。
jQuery の prev() を使って、上記の2つの要素を取得してイベントを設定します。

$('#editor').prev().on('keyup', update);
$('#editor').prev().prev().on('mouseup', update);

これだけでは不十分です。
フォントサイズやフォントフォントファミリーを選択する場合は、
.nicEdit-pane というクラスの要素がその都度生成されます。
こちらは document にイベントを割り当てて、
途中で生成された要素であってもイベントを取得できるようにします。
パネルをクリックしてからエディタに反映されるまで若干時間が掛かるので、
100ms 程度待ってからデータを取得するようにしています。

ソースコードは GitHub へアップロードしてあります。
デモはこちらへアップロードしました。

0 件のコメント:

コメントを投稿