きりしま屋

MovableTypeのエントリーの編集画面のボタンは結構便利で重宝する。
できれば、自分の使うタグの分も追加したいと思っていたけど、どこをいじればいいのか探すのが面倒でそのままにしていたところ、

たきたきのFFプレイ日記？にて
編集画面にオリジナルのタグボタンを追加する方法
として見事にまとめられていたのでご紹介。

私もさっそくblockquoteタグを入れるボタンを作成して、あと、文字色を変更するボタンを追加しようかと思っているところです。

追加してみました。

*赤ボタン

/mt/tmpl/cms/edit_entry.tmplに追加したコード
document.write('<td width="24"><a href="javascript:formatStr(\'span class=red\')"><img src="<TMPL_VAR NAME=STATIC_URI>images/red-button.gif" alt="red" width="24" height="18" border="0"></a></td>');

スタイルシートテンプレート
.red {
color: #FF0000;
}

見本

FONTタグを使って色を付けない方針にしてみた。個人的にはどっちでもいいと思うんだけど。

うーん。spanはちょっとかっこわるいな。（ソース参照）
あと、「"」が使えないみたいなのもちょっと残念。
ホントは、URLで使っている、
javascript:insertLink()
の類似みたいなちゃんとしたスクリプトが必要そう。

ということでjavascriptに挑戦（詳しくないのに）。
edit_entry.tmplの116行に出てくる
function formatStrを加工。

function formatStr (v) {
if (!document.selection) return;
var str = document.selection.createRange().text;
if (!str) return;
var V = v.split(" ");
document.selection.createRange().text = '<' + v + '>' + str + '</' + V[0] + '>';
}

こんな風にしてみた。

実行すると、

こんなふうに

なる。（ソース参照）

これで、スペースで区切られた属性を持つタグを使えるつもり。

*blockquoteボタン

edit_entry.tmplに追加したコード
document.write('<td width="24"><a href="javascript:formatStr(\'blockquote\')"><img src="<TMPL_VAR NAME=STATIC_URI>images/blockquote-button.gif" alt="blockquote" width="24" height="18" border="0"></a></td>');

スタイルシートテンプレート
blockquote {
border: 1px solid;
padding: 5px;
}

見本

ちなみに、

風のまにまに号で、

MovableTypeのボタンをDreamweaver MX 2004風にする

という試みが紹介されている。

もともとは
DEPLOGの
blockquoteを簡単に

という記事が参考になっているようだ。

んでそのまた参照元は
okadaweb.comの
エントリーの「URL」ボタンのカスタマイズ
にたどれるらしい。

target=_blank
を入れるアイデアはいいかも。

2004.9.1 MovableType 3.0になって少々変わったので追記。

■REDボタンの追加

mt/tmpl/cms/edit_entry.tmpl
172行付近に、BoldやItalicなどの記述があるのでそこに挿入。

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>');

SPANの記述のされ方にこだわる人は、

mt/mt.js
140行付近にある、function formatStr (e, v)を

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;
}

に置き換える。

■BLOCKQUOTEボタンの追加

mt/tmpl/cms/edit_entry.tmpl
172行付近に、BoldやItalicなどの記述があるのでそこに挿入。

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

2006.1.21
現在は3.2-ja-2なので、こちらを参照されたし。
きりしま屋: MovableTypeの編集画面のボタンを改造する 3.2-ja-2版