コメントにQuicktagsでタグ挿入ボタンを(2)　ボタンを画像に

２．js_quicktags.jsの編集

●説明部分の追加設定
アイコンの上にカーソルが来た時に説明文が出ると便利なので、そのための追加設定。
js_quicktags.jsの中から以下の部分を探し出して、赤字の部分を追加します。最初の方にあります。

function edButton(id, display, message, tagStart, tagEnd, access, open) {
this.id = id; // used to name the toolbar button
this.display = display; // label on button
this.message = message; // message
this.tagStart = tagStart; // open tag
this.tagEnd = tagEnd; // close tag
this.access = access; // set to -1 if tag does not need to be closed
this.open = open; // set to -1 if tag does not need to be closed
}

●ボタンの編集
ボタンに表示される部分を以下のように少し変えます。
青字の部分にボタン画像のアドレスを、その下に一行追加して赤字の部分にカーソルが来た時にポップアップされる説明を入れます。

edButtons.push(
　　　new edButton(
　　　　　　'ed_bold'
　　　　　　'http://hogehoge.com/bold.gif'
　　　　　　,'太字'
　　　　　　,'<strong>'
　　　　　　,'</strong>'
　　　　　　,'b'
　　　)
);

●ボタンタイプを変更
js_quicktags.jsの中から以下の部分を探し出します。

function edShowButton(button, i) {
if (button.access) {
var accesskey = ' accesskey = "' + button.access + '"'
}
else {
var accesskey = '';
}
switch (button.id) {
case 'ed_img':
document.write('<input type="button" id="' + button.id + '" ' + accesskey + ' class="ed_button" onclick="edInsertImage(edCanvas);" value="' + button.display + '" />');
break;
case 'ed_link':
document.write('<input type="button" id="' + button.id + '" ' + accesskey + ' class="ed_button" onclick="edInsertLink(edCanvas, ' + i + ');" value="' + button.display + '" />');
break;
case 'ed_ext_link':
document.write('<input type="button" id="' + button.id + '" ' + accesskey + ' class="ed_button" onclick="edInsertExtLink(edCanvas, ' + i + ');" value="' + button.display + '" />');
break;
case 'ed_footnote':
document.write('<input type="button" id="' + button.id + '" ' + accesskey + ' class="ed_button" onclick="edInsertFootnote(edCanvas);" value="' + button.display + '" />');
break;
default:
document.write('<input type="button" id="' + button.id + '" ' + accesskey + ' class="ed_button" onclick="edInsertTag(edCanvas, ' + i + ');" value="' + button.display + '" />');
break;
}
}

↑上の青字の部分を、↓以下の赤字の部分とそっくり入れ替えます。

case 'ed_img':
document.write('<button type="button" id="' + button.id + '" ' + accesskey + ' class="ed_button" onclick="edInsertImage(edCanvas);" title="' + button.message + '"><img src="' + button.display + '" /></button>');
break;
case 'ed_link':
document.write('<button type="button" id="' + button.id + '" ' + accesskey + ' class="ed_button" onclick="edInsertLink(edCanvas, ' + i + ');" title="' + button.message + '"><img src="' + button.display + '"> /</button>');
break;
case 'ed_ext_link':
document.write('<button type="button" id="' + button.id + '" ' + accesskey + ' class="ed_button" onclick="edInsertExtLink(edCanvas, ' + i + ');" title="' + button.message + '"><img src="' + button.display + '" /></button>');
break;
case 'ed_footnote':
document.write('<button type="button" id="' + button.id + '" ' + accesskey + ' class="ed_button" onclick="edInsertFootnote(edCanvas);" title="' + button.message + '"><img src="' + button.display + '" /></button>');
break;
default:
document.write('<button type="button" id="' + button.id + '" ' + accesskey + ' class="ed_button" onclick="edInsertTag(edCanvas, ' + i + ');" title="' + button.message + '"><img src="' + button.display + '" /></button>');
break;

３．スタイルシートの追加
ボタンを画像にした場合は必ず以下のスタイルシートを追加しておきます。でないと、ボタン画像の周りに枠がついてしまうので。

#ed_toolbar button {
background-color: #FFFFFF;
border-style: none;
padding:0px;
}

導入できたサンプル頁です～。MTの管理画面とお揃いになって、気分もいいかもと。

☆ということで、ここのボタンも画像に変えました。見た目は変わってませんが。実はネスケ７でボタンの文字を小さくした時に上手く表示されず切れてしまうのが気になっていたので。画像ならどのブラウザでも同じに表示されますから。

＜追記　2007.1.13＞
Firefoxへの対応のため、ボタンのスタイルシートに padding:0px; を追加。