| @技術/プログラミング

タグボタン

　P_BLOG には投稿画面にマークアップ用のタグボタンが用意されてるんですが、Safari で利用する限り、あまり使い勝手が良くありませんでした。例えば、タグボタンを押して <p></p> を入力した後、開始タグと終了タグのあいだにカーソルを持ってきて <a href=""&gt</a> タグを入力しても、</p> の後ろにタグが挿入されるのでした。これはちょっと使いにくいです。恐らく JavaScript のブラウザごとの仕様の問題だと思うのです。というのは先日、Firefox で投稿画面にアクセスしてみたところ、きちんとカーソルがある位置にタグが挿入されることが判明しました。ちょっといじれば Safari でもカーソル位置にタグが挿入されるようになるのではないかと思い、ちょっと Hack してみました。

　Safari でも <br /> ボタンだけはきちんとカーソル位置に挿入されるので、何が違うのだろうと include/user_include/tag_buttons.inc.php を開いてみました。するとデフォルトでは以下のように記述されていました。

$tag_buttons =<<<EOD
<input onclick="wrap('p', '', '');" onkeypress="" type="button" value="p" tabindex="1" class="tagbutton" />
<input onclick="Tag(this.value, 0);" onkeypress="" type="button" value="br" tabindex="1" class="tagbutton" />
<input onclick="wrap('a', '', 'href');" onkeypress="" type="button" value="a" tabindex="1" class="tagbutton" />
<input onclick="wrap('strong', 'stronger', '');" onkeypress="" type="button" value="strong" tabindex="1" class="tagbutton" />
<input onclick="wrap('blockquote', '', 'cite');" onkeypress="" type="button" value="quote" tabindex="1" class="tagbutton" /><br />
<input onclick="wrap('ul', '', '');" onkeypress="" type="button" value="ul" tabindex="1" class="tagbutton" />
<input onclick="wrap('ol', '', '');" onkeypress="" type="button" value="ol" tabindex="1" class="tagbutton" />
<input onclick="wrap('li', '', '');" onkeypress="" type="button" value="li" tabindex="1" class="tagbutton" />
<input onclick="wrap('code', '', '');" onkeypress="" type="button" value="code" tabindex="1" class="tagbutton" />
<input onclick="wrap('abbr', '', 'title');" onkeypress="" type="button" value="abbr" tabindex="1" class="tagbutton" />

　<br /> だけ onclick="Tag(this.value, 0);" となっています。JavaScript のことはまったく分からないのですが、onclick="wrap('', '', '');" となっているところをすべて onclick="Tag(this.value, 0);" にしてしまえば良いのではないかという仮説を立てました。するとビンゴ、これでカーソル位置にタグが挿入されるようになりました。

　しかし一部は Undefined という風になってしまいます。タグボタン関連のことは恐らく script.js でまとめて記述されているのだろうと推測し、include/script.js を開いてみました。177行目あたりに TAG BUTTON に関する記述がありました。204行目以降の部分で定義されていないタグボタンが Undefined となることが想像できたので、定義されていないものを自分で定義します。僕は以下のように記述しました。

function Tag(tag_value, bin) {
	cmt_txt = bin ? document.forms.addform.bincomment : document.forms.addform.comment;
	var TagLookup = {
		'p'			:	'<p></p>',
		'div'		:	'<div class=""></div>',
		'span'		:	'<span class=""></span>',
		'strong'	:	'<strong></strong>',
		'img'		:	'<img src="https://resources.portalshit.net/" width="" height="" class="" alt="" />',
		'a'			:	'<a href="" title="" class=""></a>',
		'ul'		:	'<ul>¥n<li></li>¥n</ul>',
		'ol'		:	'<ol>¥n<li></li>¥n</ol>',
		'li' 		:   '<li></li>',
		'quote'		:	'<blockquote cite="" title="">¥n<p></p>¥n</blockquote>',
		'br'		:	'<br />',
		'code'    :   '<code></code>',
		'abbr'      :   '<abbr title=""></abbr>',
		'tag'		:	'<>'
	};

　これでとてもマークアップが楽になりました :-)

＜蛇足＞

　いま気付いたんだけど、Firefox だと img を選択するとき width と height を拾ってくれないみたいです。（JavaScript をいじったせいかな？） やっぱ Safari がイチバンですね。