きりしま屋

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

見本