鳥繁
- 鳥繁 -

« MovableTypeにBLOCKQUOTEボタンを追加 | メイン | MovableTypeにIMGボタンを追加 »

2004年09月01日

MovableTypeにREDボタンを追加

MovableType 3.0のエントリーの投稿画面にREDボタンを追加してみました。

こんなん。
Red

文字列を選択してクリックすると、<span class=red></span>タグで囲まれます。

きりしま屋: MovableTypeにボタンを追加する

を見直しながら、対処法を決めました。

まずボタンの画像を用意します。

Red

画像を
/mt/images/
にアップロードします。

つぎに、
mt/tmpl/cms/edit_entry.tmpl
の172行付近に、

write('<a title="<MT_TRANS phrase="Bold">" href="#" onclick="return formatStr(document.entry_form.text, \'strong\')"><img src="<TMPL_VAR NAME=STATIC_URI>images/bold-button.gif" alt="<MT_TRANS phrase="Bold">" width="24" height="18" border="0" /></a>');

というのがあるはずです。これが、Bold(太字)ボタンなので、これと類似の行を作って挿入してやればいいわけです。

write('<a title="<MT_TRANS phrase="Red">" href="#" onclick="return formatStr(document.entry_form.text, \'span class=red\')"><img src="<TMPL_VAR NAME=STATIC_URI>images/red-button.gif" alt="<MT_TRANS phrase="Red">" width="24" height="18" border="0" /></a>');

こんなのを挿入してみました。

で、さいごにスタイルシートに

.red {
color: #FF0000;
}

んな感じで記述します。色はここを変えればいいんじゃないかと思います。

本文の部分だけに適用したい場合は、

.contentのクラスの下に定義して、

.content .red {
color: #FF0000;
}

ですかね。

赤い文字

これでまあ、一応動作はするのですが、SPANタグの記述の仕方が気に入らないのでもう一工夫。

mt/mt.js
140行付近に

function formatStr (e, v) {
if (!canFormat) return;
var str = getSelection(e);
if (!str) return;
setSelection(e, '<' + v + '>' + str + '</' + v + '>');
return false;
}

というのがありますが、これを改良します。

function formatStr (e, v) {
if (!canFormat) return;
var str = getSelection(e);
if (!str) return;
var V = v.split(" ");
setSelection(e, '<' + v + '>' + str + '</' + V[0] + '>');
return false;
}

おそらくeが選択範囲の文字列、vがボタンをセットしたときに入力される文字列ですので、SPANの処理をする場合は、スペースで区切ってやればいいのではと。

投稿者 Kirishima : 2004年09月01日 11:25

鳥繁.COM
Copyright © 2003-2020, Torihan.com