What You Code Is What You Get.

前回見た目だけで終了（！）してしまったので続きです。
今度こそ、「ボタンをクリックしてタグを挿入」までやります。

[実装1.2]

では、早速作っていきます。

といってもどうやればいいのかさっぱり検討がつかないので、
それらしきことが載ってるサイトを探してみる。

あった…が消えてる。
ので、Internet Archiveで。
※ 転載と思われる記事もあるのでこちらを見たほうが良いかも。
　　（ご存知の通りInternet Archiveはクソ重いので）

他にもいろいろライブラリとかあったけど、これが一番よさそうだったのでベースにさせてもらうことに。
あと、こちらもtextareaの選択範囲を取得し、前後に文字列を挿入する - Archivaも参考に。
Archivaさんには日ごろからいろいろと助けられておりますm(_ _)m

できたコードがこれ↓
※ substringをsliceに直しました。（2009/02/11 17:04）
※ replaceで無駄に正規表現使ってたのをやめました。（2009/02/11 19:17）
⇒ 定期的に修正が入りそうなのでブログに反映するのやめます。
　　最新のコードは次公開するサンプル参照ってことで。
　　（どっかのリポジトリにおこうかなぁ。。。）

obj.insert = function(s) {

	if (typeof s == 'undefined') throw 'ArgumentError';

	// カーソル移動位置（#{cursor}）を取得後、削除
	var cursor = s.indexOf('#{cursor}');
	if (cursor == -1) cursor = 0;
	s = s.replace('#{cursor}', '');

	// focusしないとIEでbodyに挿入されたりする
	// Firefoxでもボタンで挿入後にfocusが戻らない
	textarea.focus(); 

	// for IE
	if (document.selection) {
			
		// 選択範囲を取得
		var range = document.selection.createRange();

		// 選択中のテキスト引数sで置き換え（現在のカーソル位置にsを挿入）
		range.text = s;

		// カーソルがrange.textの最後になるので戻す
		var back = s.length -  cursor;
		range.move('character', -back);

		// 現在のカーソル位置を反映する（これやらないと水の泡）
		range.select();
	}

	// Firefox
	// inかundefinedあたりで判定しないとselectionStartが0の時ミスる
    else if ('selectionStart' in textarea) { 

		// スクロールバーの位置を保存
		var top = textarea.scrollTop;

		// 選択範囲の開始・終了位置を取得
        var start = textarea.selectionStart;
        var end = textarea.selectionEnd;

		// 開始位置と終了位置の間（現在のカーソル位置）にsを挿入
        textarea.value = textarea.value.slice(0, start) + s + textarea.value.slice(end);

		// カーソル移動位置に移動させる
		var index = start + cursor;
        textarea.setSelectionRange(index, index);

		// スクロールバーを戻す
	    textarea.scrollTop = top;
    }

};

insert('<a href="#{cursor}"></a>')

と呼び出せばtextareaに挿入されます。
※ #{cusor}の部分にカーソルを移動してます。
　　（スマートじゃないけどわかりやすいし応用もきくので）
処理の詳細はコメント参照。

肝心の動くサンプルはEditor1.2で。
上部のタグボタンで挿入できるようになりました。

めでたしめでたし。

さて、次は…「入力中に補完候補を出して、矢印キーで選んだものを挿入する」ですかね。

かなり重そうなので時間かかると思います…。
たぶん、分割して記事にします。