管理画面にDecodeボタンをつける。

ここを見て
そこで、mt-plugins.orgにあるような、コメントにはURLなどを埋め込めるモジュールを作ってみました。一部よけない部分がはいっていますが、自分のテンプレートに埋め込む場所を探るために使ってください(<MTEntryIfAllowComments>などで探ってみてください)。

Decodeボタンを、コメント画面につけることはできましたが、

よくよく考えると、自分自身が利用する管理画面になければ、意味がないので、MOVABLE TYPE自体をカスタマイズすることにしました。よくみたら、MT PLUGIN DIRECTORYのツールバーにあるDecodeボタンは&を変換していないので、追加しました。




今回修正するファイルは

/mt/tmpl/cms/bm_entry.tmpl
/mt/tmpl/cms/edit_entry.tmpl

です。
この関数を、各ファイルのスクリプトタグ内にペーストします。
(fig.1)
function format_code() {
if (!document.selection) return;
var str = document.selection.createRange().text;
if (!str) return;
document.selection.createRange().text = "<div class=¥"code¥">" + str + "</div>";
return;
}

function format_quote() {
if (!document.selection) return;
var str = document.selection.createRange().text;
if (!str) return;
document.selection.createRange().text = "<div class=¥"blockquote¥">" + str + "</div>";
return;
}

function deCode() {
if (!document.selection) return;
strSelection = document.selection.createRange().text
if (!strSelection) return;
strSelection = strSelection.replace(new RegExp("&","g"), "&amp;");
strSelection = strSelection.replace(new RegExp("<","g"), "&lt;");
strSelection = strSelection.replace(new RegExp(">","g"), "&gt;");
document.selection.createRange().text = strSelection;
return;
}


つぎに、以下のようなセクションを探し・・・

(fig.2)BEFORE:
<script language="javascript">
if (document.selection) {
document.write('<table border="0" cellspacing="0" cellpadding="0" width="107">');
document.write('<tr>');
document.write('<td width="24"><a href="javascript:formatStr(¥'b¥')"><img src="<TMPL_VAR NAME=STATIC_URI>images/bold-button.gif" alt="bold" width="24" height="18" border="0"></a></td>');
document.write('<td width="24"><a href="javascript:formatStr(¥'i¥')"><img src="<TMPL_VAR NAME=STATIC_URI>images/italic-button.gif" alt="italic" width="24" height="18" border="0"></a></td>');
document.write('<td width="24"><a href="javascript:formatStr(¥'u¥')"><img src="<TMPL_VAR NAME=STATIC_URI>images/underline-button.gif" alt="underline" width="24" height="18" border="0"></a></td>');
document.write('<td width="26"><a href="javascript:insertLink()"><img src="<TMPL_VAR NAME=STATIC_URI>images/url-button.gif" alt="link" width="26" height="18" border="0"></a></td>');
document.write('</tr>');
document.write('</table>');
} else {
document.write('&nbsp;');
}
</script>


赤い文字の部分を追加します。

(fig.3)AFTER:
<script language="javascript">
if (document.selection) {
document.write('<table border="0" cellspacing="0" cellpadding="0" width="179">');
document.write('<tr>');
document.write('<td width="24"><a href="javascript:format_quote()"><img src="<TMPL_VAR NAME=STATIC_URI>images/quote-button.gif" alt="quote" width="24" height="18" border="0"></a></td>');
document.write('<td width="24"><a href="javascript:deCode()"><img src="<TMPL_VAR NAME=STATIC_URI>images/decode-button.gif" alt="decode" width="24" height="18" border="0"></a></td>');
document.write('<td width="24"><a href="javascript:format_code()"><img src="<TMPL_VAR NAME=STATIC_URI>images/code-button.gif" alt="code" width="24" height="18" border="0"></a></td>');

document.write('<td width="24"><a href="javascript:formatStr(¥'b¥')"><img src="<TMPL_VAR NAME=STATIC_URI>images/bold-button.gif" alt="bold" width="24" height="18" border="0"></a></td>');
document.write('<td width="24"><a href="javascript:formatStr(¥'i¥')"><img src="<TMPL_VAR NAME=STATIC_URI>images/italic-button.gif" alt="italic" width="24" height="18" border="0"></a></td>');
document.write('<td width="24"><a href="javascript:formatStr(¥'u¥')"><img src="<TMPL_VAR NAME=STATIC_URI>images/underline-button.gif" alt="underline" width="24" height="18" border="0"></a></td>');
document.write('<td width="26"><a href="javascript:insertLink()"><img src="<TMPL_VAR NAME=STATIC_URI>images/url-button.gif" alt="link" width="26" height="18" border="0"></a></td>');
document.write('</tr>');
document.write('</table>');
} else {
document.write('&nbsp;');
}
</script>

ボタンとしてGIFファイルが必要になります。以下の画像を/mt/imagesにコピーしておいてください。

code-button.gif
decode-button.gif
quote-button.gif

この修正をおこなうと、ボタンの位置がずれますので、(fig.3)のコードの少し上にあるテーブルタグのwidth値を増加した分、減算してください。

edit_entry.tmplの場合。
<td width="402"><font class="pagetitle"><MT_TRANS phrase="Entry Body"></font></td>
<td width="98" align="right" valign="top">

98となっているところが、オリジナルのツールバーの幅です。幅24pxの画像が3つ増えているので、82pxを加算します。1つ上の402は、逆に82px減らします。

ということで、下のように修正します。
<td width="321"><font class="pagetitle"><MT_TRANS phrase="Entry Body"></font></td>
<td width="179" align="right" valign="top">

これで、ツールバーのズレが直りました。

これと同じ要領で、bm_entry.tmplも修正すれば、完成です。
コメント

私もMTの管理画面にボタンを色々付けてみたのですが、DECODEボタンも付けられるんですね!これは非常に便利そうです。是非今度試してみたいと思います。参考になりました。

youthkeeさん、こんにちわ。

Dreamweaver風ボタンてのもイイですね〜。さっそくいくつかパクらせてもらいます^^。

  • えむくま
  • 2003/12/02 11:44

エントリー画面が編集しやすくなりました♪
ありがとうございます!
これからもよろしくお願いいたします。
また良いものを紹介してくださいね!

喜んでいただいて何よりです(*'-')。
またなにかイジったら紹介したいと思います。

  • mkuma
  • 2004/01/23 14:09

はじめまして。
お友達のところで、これを使ってるところがあったので、参考にさせていただきました。
あと、追加した画像に対する「alt」が、みんな「bold」になってた部分は変更させていただきました。
ありがとうございました。

  • TAKA
  • 2004/02/08 16:25

あー、boldの行をコピーして作ったので、そのままですね。
ま、画像で分かるからいっか(´Д`;)ヾ。

  • mkuma
  • 2004/02/11 02:02

いつも勝手にお世話になっています。
このscriptってMozillaなどでは使えないですよね?
もしも使えるようにするにはどういう改造をすればよいですか?
あつかましい質問で申し訳ないです!

MozillaってFirefoxかな?
Mozillaだと、NNやIEで動作するDocument.write等のメソッドが使えないので、ツールバー自体表示されないと思います。

document.writeで出力しているHTMLをそのまま直に出力されるようにすればいいと思います。ボタンが表示されても、実際に各ボタンの機能を実行できるかどうかは、やってみないとわからないですが、こちらを参考に。

http://bluesky.sub.jp/blog/archives/2004/0121014605.html">http://bluesky.sub.jp/blog/archives/2004/0121014605.html

  • mkuma
  • 2004/02/16 09:02

ありがとうございます!
教えていただいたサイトを参考にしてがんばってみますね♪

はじめまして。
本日トラックバックを送りました。
で…「教えてクン」になるのはいけないと思いつつも
ギブアップしてしまい書き込みしている次第です(苦笑)

img src="〜.gif"と出力してくれるボタンとは、なかなか難しいものなのでしょうか?
いろいろ試してみましたがうまく行かず、苦戦しています。

簡単だよー!という事でしたら、教えていただけませんでしょうか?
宜しくお願い致します。

このエントリじゃなくて、Color Selectorをつけるというエントリを参考にしてもらうと楽に実装できるかも。

関数を下記のように変更。

function colorSelect (obj) {
var v;
var str = document.selection.createRange().text;
with(obj) {
if (options[selectedIndex].value == "------") return;
v = options[selectedIndex].value;
}
document.selection.createRange().text = str + '<img src="' + v + '.gif">';
}

あとは、HTMLの色選択のドロップダウンリストに含まれる値(Red,Yellow,Blueとかになってるところ)をスマイリーのgifファイル名に置き換えれば、できあがり。(laugh, cry, angryとか文字にしないと駄目ですが)

欠点は、文字を選択していないと使えないということです。IEだと、テキストエリアのカーソル位置を取得することも可能ですが、ちょっと面倒なので、ここのコメントだけで説明するのは、難しい(´Д`)ゞ。

  • えむくま
  • 2004/03/01 03:48

 えむくまさんこんばんは。
早速お答えいただきまして、本当にありがとうございました。
こちらも早速設置にとりかかり、無事成功しました!
で、エントリーでも少し書かせてもらいました。
えむくまさんがここで教えてくださったスクリプト記述や
方法なんかをほとんどコピペした感じになってしまったのですが、
むしろ感謝の意を込めまして書かせてもらいましたので、
お許しくださいませ。
(恥ずかしい記述の仕方になってしまってますが、あれが限界(^^;;

この度は本当に、ありがとうございました♪

こんにちは。
僕も、たいちさんのように、GIFアイコンをエントリー変種画面でぺロっと貼り付けたいと思っていろいろjavascriptをいじってみました。
カーソルの位置が今あるばしょからペーストできます。

こんな風にするとできました。
function weatherIcon(wIcon) {
document.entry_form.text.focus();
if (!document.selection) return;
var range = document.selection.createRange();
range.text='images/'+ wIcon +'" alt="'+ wIcon +'" width="15" height="15" style="margin:0px 2px;border-style:none;">';
}

呼び出すほうのアイコンのリンクはこんなかんじになります。
document.write('images/hare.gif" alt="hare.gif" width="15" height="15" style="margin:0px 2px;border-style:none;" />');

詳しくは、コチラのほうで・・
http://nyoro.net/mt/archives/000086.html">http://nyoro.net/mt/archives/000086.html

管理咨? 管理咨?公司

大変参考になりました。
それと、TBさせていただきました。
ありがとうございます!

  • Noel
  • 2004/07/06 23:24

すみません、どういう風に使えるのか判らないんで、コメントで使わせて下さい。
コード
引用

  • 2004/10/09 16:19

太字
イタリック
http://mkuma.oops.jp/">リンク
デコード
今使えるのは、これだけです。

コメント欄での「引用」と「コード」は事情があって使えなくしています。
このエントリーでいうと、オレンジの破線で囲まれたところが「引用」、グリーンの破線で囲まれたところが「コード」です。スタイルシートにどのように記述するかによるので、特別なことをしてるわけではありません。

  • えむくま
  • 2004/10/10 12:36
トラックバック
この記事のトラックバックURL