MovableType 3.17のエントリーの投稿画面にREDボタンを追加してみました。
こんなん。
文字列を選択してクリックすると、<span class=red></span>タグで囲まれます。
後はスタイルシートで指定すれば色づけができる、という寸法です。
鳥繁.COM: MovableTypeにREDボタンを追加、きりしま屋: MovableTypeにREDボタンを追加 3.121-jaの3.17-ja版です。
まずボタンの画像を用意します。
画像を
/mt/images/
にアップロードします。
つぎに、
mt/tmpl/cms/edit_entry.tmpl
の186行目付近に
write('<a title="<MT_TRANS phrase="Bold" escape="singlequotes">" href="#" onclick="return formatStr(document.entry_form.text, \'strong\')"><img src="<TMPL_VAR NAME=STATIC_URI>images/html-bold.gif" alt="<MT_TRANS phrase="Bold" escape="singlequotes">" width="22" height="16" /></a>');
というのがあるはずです。これが、Bold（太字）ボタンなので、これと類似の行を作って挿入してやればいいというわけです。
write('<a title="<MT_TRANS phrase="Red" escape="singlequotes">" href="#" onclick="return formatStr(document.entry_form.text, \'span class=red\')"><img src="<TMPL_VAR NAME=STATIC_URI>images/html-red.gif" alt="<MT_TRANS phrase="Red" escape="singlequotes">" width="22" height="16" /></a>');
こんなのを挿入してみました。
また、編集画面には、ボタンが２セットあるので、もう一カ所、211行目付近から始まるところにも同様の手段を講じておきます。
write('<a title="<MT_TRANS phrase="Bold" escape="singlequotes">" href="#" onclick="return formatStr(document.entry_form.text_more, \'strong\')"><img src="<TMPL_VAR NAME=STATIC_URI>images/html-bold.gif" alt="<MT_TRANS phrase="Bold" escape="singlequotes">" width="22" height="16" /></a>');
を参考に、
write('<a title="<MT_TRANS phrase="Red" escape="singlequotes">" href="#" onclick="return formatStr(document.entry_form.text_more, \'span class=red\')"><img src="<TMPL_VAR NAME=STATIC_URI>images/html-red.gif" alt="<MT_TRANS phrase="Red" escape="singlequotes">" width="22" height="16" /></a>');
って感じです。
で、さいごにスタイルシートに
.red {
color: #FF0000;
}
んな感じで記述します。色はここを変えればいいんじゃないかと思います。
本文の部分だけに適用したい場合は、
.contentのクラスの下に定義して、
.content .red {
color: #FF0000;
}
ですかね。
赤い文字
これでまあ、一応動作はするのですが、SPANタグの記述の仕方が気に入らないのでもう一工夫。
mt/mt.js
147行付近に
function formatStr (e, v) {
if (!canFormat) return;
var str = getSelected(e);
if (!str) return;
setSelection(e, '<' + v + '>' + str + '</' + v + '>');
return false;
}
というのがありますが、これを改良します。
function formatStr (e, v) {
if (!canFormat) return;
var str = getSelected(e);
if (!str) return;
var V = v.split(" ");
setSelection(e, '<' + v + '>' + str + '</' + V[0] + '>');
return false;
}
おそらくeが選択範囲の文字列、vがボタンをセットしたときに入力される文字列ですので、SPANの処理をする場合は、スペースで区切ってやればいいのではと。
これを応用すれば属性付きのタグも美しく打ち込めると思います。
また、3.151では、getSelectionだったのが、getSelectedになってますね。
2006.1.21
現在は3.2-ja-2なので、こちらを参照されたし。
きりしま屋: MovableTypeの編集画面のボタンを改造する 3.2-ja-2版