便利な jQuery プラグイン jQuery.selection のメモ書きです。
TinyMCE のような Web ブラウザで使える HTML エディタには、選択した文字列に対して html タグをつけたりする機能があるのですが、これを簡単に自前で実装できないかなという事で調査。
調べると、jQuery.selection という正に探していたそのものが速攻で見つかったので試してみました。
とりあえず、作ってみたデモはコチラ。
本家のデモを参考にこんなの機能を付けました。
- 選択した範囲の文字列をアラートで表示
- 選択した範囲の文字列を <storong> タグで囲む
- 選択した範囲の文字列を <a> タグで囲んでリンクを付ける
テキストエリアが 1 つの場合はこんな感じで選択された文字列が取得できます。
1 | var str = $("textarea").selection(); |
選択範囲の文字列をタグで囲むのはこんな感じに。
1 2 3 4 5 6 7 | $("#func-storong").click(function(){ if (str.match(/.+/)) { $("textarea") .selection("insert", {text: "<strong>", mode: "before"}) .selection("insert", {text: "</strong>", mode: "after"}); }}); |
今回は複数のテキストエリアに対してこの操作を行いたいと思ったので、デモはこのような感じのコードにしてみました。
まずは html 側。
1 2 3 4 5 6 7 8 | <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 側。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 | (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 が便利かなと思います。
大変ありがたく
こちらのjQueryプラグインを使わせていただいています
少し困ったことがありまして…
おそらくブラウザ側の問題で、こちらのプログラム自体に問題があるわけではないと思いますが
もしかして、プログラムを少し書き換えるなどして解決できる方法を思いつくことがあるかもしれないと思い
コメントをさせていただきました
こちらのjQueryプラグインを導入したWEBページを
Chromeで開いて利用した場合に
textareaにhtmlタグを挿入すると
textareaが一番下まで勝手にスクロールしてしまいます
他のブラウザではこの挙動は一切起きず
Chromeだけで起きるようです
他のブラウザを使うという意外に
何か良いお知恵がありましたらお聞かせいただけると幸いです
hiro 様
コメントありがとうございます。
> こちらのjQueryプラグイン
これは私が作ったやつではないんですよね^^;
> 勝手にスクロール
これは気付きませんでした。
Chrome だけに起きるとすると jQuery プラグインとの相性なのかなと思うのですが、いずれにせよ作者さんに聞いてみるのが早いとは思います。
http://madapaja.github.io/jquery.selection/ja_jp.html
よろしくお願いします。