Movable Type入門 » 3.3バージョン対応

エントリーで色ボタン設定(MT3版)

エントリーのボタン機能は、3.3バージョンになっても変わらず味気ない・・・
しかし管理画面もカスタマイズできるのがMovable Typeの良い所♪ 

まずやりたい事ですがMovableTypeの新規エントリー画面は
entrybefore.gif
のようになっていて毎回、色の指定に<font color=~>とタグを書かなくてはいけません…
、(※画面は3.2なのでちょっとレイアウトが違います。)
そこで
entryafter.gif
のように新規エントリー画面に色指定できるボタンを作成します。

作業は3点あります。
1.イメージファイルをアップロード
 /cgi/mt/mt-static/imagesの配下に画像gifをアップロードします。

darkred.gif

この画面で使っている画像です。
もし使われるようならダウンロードしてください。

2./cgi/mt/tmpl/cms/edit_entry.tmplを修正

530行目前後がエントリーの内容、580行目前後が追記のボタンを決めています。

まずエントリーの内容は530行目前後にある『write('<img title ~ 』の末尾に

write('<img title="<MT_TRANS phrase="DarkRed">" onclick="return formatColorStr(document.entry_form.text, \'ff0000\')" src="<TMPL_VAR NAME=STATIC_URI>images/darkred.gif" alt="<MT_TRANS phrase="darkred" escape="singlequotes">" width="22" height="16" />');

を追記します。

次に580行目前後にある『write('<img title ~ 』の末尾に

write('<img title="<MT_TRANS phrase="DarkRed">" onclick="return formatColorStr(document.entry_form.text_more, \'ff0000\')" src="<TMPL_VAR NAME=STATIC_URI>images/darkred.gif" alt="<MT_TRANS phrase="darkred" escape="singlequotes">" width="22" height="16" />');

を追記します。

 おまけ: これはjavascript『formatColorStr』に、選択された範囲とカラーコードを渡しています。
      内容と追記の違いは末尾に_moreが付くだけです。覚えておくと応用が効くかもしれません

3./cgi/mt/mt-static/mt.jsに追記

場所はどこでも良いのですが、function formatStr (e, v) {の上あたりに

function formatColorStr (e, v) { if (!canFormat) return; var str = getSelected(e); if (!str) return; setSelection(e, '<font color="#' + v + '">' + str + '</font>'); return false; }

を追記すれば完成です。

さらに色を追加したい時は
1.ボタンは作成。(ペイントで簡単にできます。)
2. /cgi/mt/tmpl/cms/edit_entry.tmplで上のソースから
  カラーコードとボタンのgifを設定しなおして追加してください。
3.は必要ありません。

おまけ
作業の確認をすると、


 1.表示する画像をアップロードしています。

 2.管理画面のを編集しています。(HTMLにコードを足しているのと同じです。)

 3.javascriptでプログラムを追加しています。


どんな作業をやったかを正しく理解する事で
もうちょっと違った事がやりたい!」とか「動かない…」という事にも対応できるようになります。
大事なことです…