続々・コードを美しく「魅せる」@タグ直接入力 Greasemonkey編

シリーズ化してきました。
さて、前回のおさらいですが。。
brBrbrを拡張すれば SyntaxHighlighter　で br が入らなくなります！
ということをしました。

しかし、<カスタムタグ>

[/source ]　とかいちいち入力するのが面倒ですよね。

ってことで、また拡張です。



今回は、勉強がてらに Greasemonkey を使用します。

ボタンを追加してしまおうということです。



ちなみにGreasemonkeyとは

<blockquote><words>インターネットブラウザ「 Firefox 」でユーザースクリプトを実現するための拡張機能（Add-on）の1つ。

Firefoxにインストールすると、サイト閲覧者側（利用者側）で、サイトの体裁を整えることができます。</words><cite><a class='link_img' href='http://google-mania.net/archives/213' target='_blank'>

Greasemonkey入門 ～よくわかるグリースモンキーの使い方 ～</a></cite></blockquote>



早速ですが、Greasemonkeyで下記コードを追加してやると、投稿画面にボタンが増えます。



<code-style>[source language='javascript']

// ==UserScript==

// @name           tag

// @namespace   aa

// @include         bb

// ==/UserScript==

var doc = document;



var tag_hash = {

     'source':'<code-style>[source language="xml"][/source ]</code-style>'

};



toolbar = doc.getElementById("ed_toolbar");

if (toolbar) {

    var th = toolbar.innerHTML;

    th += '<br />';

    for (var i in tag_hash) {

        var tag_cont = tag_hash[i].replace(/\"/g,'\'');

        tag_cont = tag_cont.replace(/\'/g,'\\\'');

        th += '<input type="button" onclick="document.post.content.value+=\'' + tag_cont + '\'" value="' + i + '" />';

    }

    toolbar.innerHTML = th;

}

※
●SyntaxHighlighter　で変換されないように[/source ]の最後に半角スペースを入れてます。
●// @namespace aa
　// @include bb
　は適当に変更してください。

すると、こうなります。

そして、 source ボタンをクリックすれば、テキストエリアに挿入されます！


ただし、問題はテキストエリアの最後に追加されてしまういことです。
たとえば。

上で、5にカーソルがある状態で source ボタンをクリックしたら、5 のところにテキストが挿入されてほしいのですが、


のように最下部に入ってしまうということです。。
WP自体がテキストエリアの途中に追加できているのだから不可能ではないです。

あとで拡張できたら・・


番外編　– brBrbr拡張さらにカスタム –
続・コードを美しく「魅せる」@brBrbrカスタム編 にてコメントしていただいた「タグを消す」ですが、ちょっと変えてみました。

function brBrbr($brbr) {
...
$brbr = preg_replace('/(<code-style.*?>)(.*?)<\/code-style>/ise', "clr_br('$0')", $brbr);
$brbr="<p>\n".$brbr."</p>\n";
$brbr=clr_tag($brbr);
...
}
....
function clr_tag($str){
    $tag_arr = array('code-style');
    for ($i = 0;$i < count($tag_arr);$i++){
        $left  = '<'.$tag_arr[$i].'>';
        $right = '<'.$tag_arr[$i].' />';
    	$str = str_replace($left,"",$str);
    	$str = str_replace($right,"",$str);
    }
	return $str;
}

です。
$tag_arr に消したいタグを追加していけばどんどん消せます。
もっとうまいやり方があるような・・