選択したテキストエリアの文字操作をするjQueryプラグイン

便利な jQuery プラグイン jQuery.selection のメモ書きです。

TinyMCE のような Web ブラウザで使える HTML エディタには、選択した文字列に対して html タグをつけたりする機能があるのですが、これを簡単に自前で実装できないかなという事で調査。

調べると、jQuery.selection という正に探していたそのものが速攻で見つかったので試してみました。

とりあえず、作ってみたデモはコチラ。

本家のデモを参考にこんなの機能を付けました。

• 選択した範囲の文字列をアラートで表示
• 選択した範囲の文字列を <storong> タグで囲む
• 選択した範囲の文字列を <a> タグで囲んでリンクを付ける

テキストエリアが 1 つの場合はこんな感じで選択された文字列が取得できます。

var str = $("textarea").selection();

選択範囲の文字列をタグで囲むのはこんな感じに。

$("#func-storong").click(function(){
	if (str.match(/.+/)) {
		$("textarea")
		.selection("insert", {text: "<strong>", mode: "before"})
		.selection("insert", {text: "</strong>", mode: "after"});
	}
});

今回は複数のテキストエリアに対してこの操作を行いたいと思ったので、デモはこのような感じのコードにしてみました。

まずは html 側。

<textarea id="textarea1" rows="5"></textarea>
<textarea id="textarea2" rows="5"></textarea>

<input type="hidden" id="cur" value="">

<input type="button" id="func-alert" value="range alert">
<input type="button" id="func-storong" value="storong">
<input type="button" id="func-link" value="link">

次は js 側。

(function(){

	/* .focus で選択されたテキストエリアの id を取得
	    取得した id は hidden にいれて前回の操作対象を記憶 */
	$("textarea").focus(function(){
		var cur = $(this).attr("id");
		$("#cur").val(cur);
	});

	/* alert を出す */
	$("#func-alert").click(function(){
		var cur = $("#cur").val();
		var str = $("#" + cur).selection();

		/* 選択された文字があるかのチェック (適当) */
		if (str.match(/.+/)) {
			alert(str);
		}
	});

	/* <strong> を付ける */
	$("#func-storong").click(function(){

		var cur = $("#cur").val();
		var str = $("#" + cur).selection();

		if (str.match(/.+/)) {
			/* hidden に記憶されているテキストエリアに対して操作 */
			$("#" + cur)
			.selection("insert", {text: "<strong>", mode: "before"})
			.selection("insert", {text: "</strong>", mode: "after"});
		}
	});

	/* <a> を付ける */
	$("#func-link").click(function(){

		var cur = $("#cur").val();
		var str = $("#" + cur).selection();

		if (str.match(/.+/)) {
			$("#" + cur)
			.selection("insert", {text: '<a href="http:///" target="_blank">', mode: "before"})
			.selection("insert", {text: "</a>", mode: "after"});
		}
	});

})(jQuery);

複数ある場合は id 等で操作対象を絞りこまないと意図しない場所にタグ等が追加されてしまうためこのような感じに。

これが良いやり方かは全くもって謎ですが、内製ツールで使うヤツなので良しとします。

TinyMCE をカスタマイズが早そうな気もするけど、お手軽さであれば jQuery.selection が便利かなと思います。