MovableTypeにボタンを追加する

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版

トラックバック

この一覧は、次のエントリーを参照しています: MovableTypeにボタンを追加する:

» MovableTypeにBLOCKQUOTEボタンを追加 送信元 鳥繁.COM
MovableTypeのエントリーの投稿画面にBLOCKQUOTEボタンを追加し... [詳しくはこちら]

» MovableTypeにREDボタンを追加 送信元 鳥繁.COM
MovableTypeのエントリーの投稿画面にREDボタンを追加してみました。 ... [詳しくはこちら]

» MovableTypeにBLOCKQUOTEボタンを追加 送信元 パヤップネット
鳥繁.COM http://www.torihan.com/archives/0... [詳しくはこちら]

» MovableTypeにBLOCKQUOTEボタンを追加 送信元 パヤップネット
鳥繁.COM http://www.torihan.com/archives/0... [詳しくはこちら]

» MovableTypeにBLOCKQUOTEボタンを追加 送信元 Payap.net
鳥繁.COMさんとBLOG質問箱 さんときりしま屋さんのおかげでだいぶ便利になり... [詳しくはこちら]

» タグ挿入ボタンを追加 送信元 心にうつりゆく由無しごと
画像の表示に「Highslide JS」を使うようにしたため、aタグにクラスを指... [詳しくはこちら]

コメント (1)

spanタグが使いたくて試行錯誤、閉じるタグがちゃんと出力できる方法を探してたどり着きました。うまい解決方法を有り難うございます。使わせて頂きましたので、御礼まで。

コメントを投稿

(コメントは、オーナーが承認するまで表示されません)

About

2004年02月03日 14:47に投稿されたエントリーのページです。

ひとつ前の投稿は「Horizons ooPs!」です。

次の投稿は「900 SUPER SPORTに乗った体験談」です。

他にも多くのエントリーがあります。メインページアーカイブページも見てください。

Powered by
Movable Type 3.35