top

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

先日、Quicktagsを入れてみたわけですが、ボタンに画像を使えたらもっといいのになあと思っていました。その方法を思いついたので覚え書きしておきます(あくまでも自己流覚え書きですので…もっといい方法があれば追記していきます)。

まず前提としてQuicktagsの導入は終わっているものとします(導入方法はこちら)。

1.ボタン用画像の用意
好きな画像を用意すればいいのですが、例題ではMTの管理画面から拾ってきました。
    
↑こんな感じ。足りないものは同じ土台を使って適当に作り足しました。
それらをFTPで好きな場所にアップします。

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;

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

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

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


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

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

 

トラックバックURL

トラックバックされる際にはこの記事へのリンクをお願い致します

コメント

はじめまして。
このサイトを参考にさせていただきました。ありがとうございます。

ところで、Quicktagsのバージョンが1.3だと、以下のように変更する必要があります。参考までにどうぞ

■ボタンタイプを変更
case 'ed_img':
document.write('');
break;
case 'ed_link':
document.write('');
break;
case 'ed_ext_link':
document.write('');
break;
case 'ed_footnote':
document.write('');
break;
case 'ed_via':
document.write('');
break;
default:
document.write('');
break;

■CSS
/* quicktags */
#ed_toolbar_comment-text button {
background-color: #FFFFFF;
border-style: none;
padding:0px;
}

こちらこそ初めまして。
古い記事にもかかわらず参考にしていただけてありがとうございます。

バージョン1.3の情報ありがとうございます。
いくつか変更されているところがあるみたいですね。
なかなかバージョンアップ後の内容変化まで追い切れないので助かりました。

コメントを投稿

 


 <注意>
 ご利用のブラウザ、設定ではコメントのプレビューおよび投稿はご利用になれません。
 コメント投稿の際はお手数ですがjavascriptをオンにして下さい。
 *javascriptオフのまま投稿ボタンを押すと送信内容が消えますのでご注意下さい。