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

Tips

2003.10.12

ここを見て

Sync A World You Want To Explore: コメントにもリンクを

そこで、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の画像が３つ増えているので、82pxを加算します。１つ上の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も修正すれば、完成です。

風のまにまに号より:

2003年11月29日 12:51 PM

MTの編集画面にDreamweaver風ボタンを

以前depologさんのエントリーを参考にMTの編集画面に「引用」ボタンを設置させていただいたのですが、これを応用してDreamweaver MX 2004風の各種タグ挿入ボタン一式を組み込んでみました。これを入れるとDWで編集するのと同じ感覚で色々なタグを使うことができます。……

返信
youthkee より:

2003年11月29日 12:56 PM

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

返信
えむくまより:

2003年12月2日 11:44 AM

youthkeeさん、こんにちわ。
Dreamweaver風ボタンてのもイイですね～。さっそくいくつかパクらせてもらいます^^。

返信
なかよしこよしより:

2004年1月22日 5:51 PM

管理画面にDecodeボタン,etc

管理画面にDecodeボタンをつけました。
｢こんなボタンがあったら便利だなぁ~♪｣
と思っていたところで見つけたので幸福度42%UP。

返信
こだるまより:

2004年1月22日 7:32 PM

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

返信
mkuma より:

2004年1月23日 2:09 PM

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

返信
141 WebLog より:

2004年2月1日 9:07 PM

Entryを快適に

Trivial Blogさんを見て便利そうなTipsを発見したので自分の環境もちょっといじってみた。 Entry画面で文字列を選択しボタンを押すだけでBやI,Uタグを簡単に付け加えられますが、これを改良して選択単語をGoogleのI’m Feeling Lucky!で検索出来るようにしてみました。たい…

返信
ぽこねっと。より:

2004年2月6日 6:01 PM

更にカスタマイズ

Trivial BLOG.さんの管理画面にDecodeボタンをつける。を参考に、エディタ画面にテキス…

返信
TAKA's loft::blog より:

2004年2月8日 4:23 PM

文字の背景色と文字色

あああああと、こんな事してみたくなったので、「なかよしこよし」様のところで見つけたこんな記事を参考に、ちょいと、いや、かなり格闘してみた。元ネタはここ。ありがとうございます。ここで注意すべきは、背景色も文字色も反映させたかったら、 function colorSel…

返信
TAKA より:

2004年2月8日 4:25 PM

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

返信
mkuma より:

2004年2月11日 2:02 AM

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

返信
こだるまより:

2004年2月15日 9:15 PM

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

返信
mkuma より:

2004年2月16日 9:02 AM

MozillaってFirefoxかな？
Mozillaだと、NNやIEで動作するDocument.write等のメソッドが使えないので、ツールバー自体表示されないと思います。
document.writeで出力しているHTMLをそのまま直に出力されるようにすればいいと思います。ボタンが表示されても、実際に各ボタンの機能を実行できるかどうかは、やってみないとわからないですが、こちらを参考に。
http://bluesky.sub.jp/blog/archives/2004/0121014605.html

返信
こだるまより:

2004年2月16日 10:39 AM

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

返信
Zakimi::Blog より:

2004年2月19日 10:56 PM

MT管理画面の改造

これがほしかったんだよね。この修正のおかげでで簡単に引用を記入したり、またhtmlのタグ、例えば<a href=”http://www.zakimi.com”>Zakimi::Blog</a> を簡単に書いたり出来るようになります。ぜひお試しあれ参照サイト： Trivial BLOG. – 管理画面にDecod…

返信
Marblog より:

2004年2月26日 8:45 PM

投稿画面の便利タグ機能追加

Movabletypeで話のネタを投稿する時に使うエントリー画面の横に、<B>タグや<I>タグ、URLリンクをつけるタブが標準で付いているのですが、これを自由にカスタマイズして、いろんな種類のタグを付けてらっしゃる方がいたので、自分もやってみました。 ↓参考に…

返信
POWER BLOG SIDE より:

2004年2月28日 11:59 PM

楽しく使って欲しいのです(ｷ▼д▼;)ﾄﾎﾎ･･

The Gibsons!さんとこの’MT:コメントでタグ・スマイリー’というエントリーにお世話になり、コメント記事にスマイリーアイコンを表示できるようにしました(一日かかって(^^;; 更にポップアップコメントウィンドウでも同様にしたいと思いこちらのエントリーも大変参考にさせ…

返信
たいちより:

2004年2月29日 12:07 PM

はじめまして。
本日トラックバックを送りました。
で…「教えてクン」になるのはいけないと思いつつも
ギブアップしてしまい書き込みしている次第です(苦笑)
img src=”～.gif”と出力してくれるボタンとは、なかなか難しいものなのでしょうか？
いろいろ試してみましたがうまく行かず、苦戦しています。
簡単だよー！という事でしたら、教えていただけませんでしょうか？
宜しくお願い致します。

返信
えむくまより:

2004年3月1日 3:48 AM

このエントリじゃなくて、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だと、テキストエリアのカーソル位置を取得することも可能ですが、ちょっと面倒なので、ここのコメントだけで説明するのは、難しい（´Д｀）ゞ。

返信
POWER BLOG SIDE より:

2004年3月2日 12:03 PM

お天気アイコン実装！

エントリー編集画面にプルダウンメニューを追加し、お天気アイコンを一発表示！

返信
たいちより:

2004年3月2日 12:27 PM

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

返信
nyoro@nyoro.net より:

2004年3月27日 12:04 PM

こんにちは。
僕も、たいちさんのように、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

返信
POWER BLOG SIDE より:

2004年3月27日 1:53 PM

お天気アイコン実装！

エントリー編集画面にプルダウンメニューを追加し、お天気アイコンを一発表示！

返信
Thanks a ton. より:

2004年4月25日 11:32 PM

便利ボタン、更に発見！

ハロー、ボタンにウハビバ中です。もう止まりません。やばいです。でもつけちゃうのです。（笑）どうしてもっ！（笑）なかよしこよしさんにてエントリー時｢文字にバックグラウンドカラー｣をつけられるボタンを発見したので、こりゃいいやとまたまた取り入れました。（…

返信
twwblog より:

2004年4月30日 1:10 AM

MTの編集画面にHTMLエディター機能を組み込む

Going My Way: MTの編集画面にHTMLエディター機能を組み込むメモ。…

返信
twwblog より:

2004年4月30日 1:14 AM

MTの編集画面にHTMLエディター機能を組み込む

Going My Way: MTの編集画面にHTMLエディター機能を組み込むメモ。…

返信
bluesky Blog より:

2004年5月10日 1:27 AM

Mozillaでの編集ボタン動作改善３

Mozillaでの編集ボタン動作改善に対するトラックバック記事Mozilla で MT の編集ボタンその4を参考に、編集画面の修正を実施した。

返信
MovableTypeを攻略せよ！より:

2004年5月20日 9:44 AM

Decodeと文字色をつける

文字フォントを変えるに引き続き、エントリー画面をどんどん変更しまーす。 Trivial BLOGさんの「管理画面にDecodeボタンをつける」と「Color Selectorをつける」を参考にしました。 ※補記：Decodeは＜＞を自動で＆ｌｔ；とか＆ｇｔ；に直してくれるボタンです。やっぱ…

返信
管理咨? より:

2004年5月27日 10:53 AM

管理咨? 管理咨?公司

返信
hwp blog より:

2004年6月16日 11:48 AM

IEとMozillaで使う編集ボタン

会社でエントリーする時Windowsからするけど、自宅でやる時はSafariで閲覧してるから、Mozilla系でも投稿時に便利になってもらわんと。 IEにdecodeとか組み込んでると、MozillaはいいんだけどIEでエラーがでる。こりゃ～納得いかない。検索、検索。……

返信
PC Blog @ Noel Cafe より:

2004年7月6日 11:18 PM

Decodeボタンをつける。

タグとかの引用をかなーり使うので、デコードボタンも作ろうと思います。 Reference 管理画面にDecodeボタンをつける。 From Trivial BLOG 投稿画面の便利タグ機能追加 From Marglog.net Ver 2.6では・・・。 Referenceを参考にしてください。 (書く気無くなりました。) …

返信
PC Blog @ Noel Cafe より:

2004年7月6日 11:21 PM

管理画面やコメントでのボタンについて。

色々、このブログに書きましたが、それについて書いてあるブログリファレンスをまとめてみました。ま、順序は適当。どれが出元だか分からなくなってきたのー。＜おい。 Reference @ PC Blog @ Noel Cafe blockquoteボタン URLボタンの手直し。 HRボタンをつくる。 Deco…

返信
Noel より:

2004年7月6日 11:24 PM

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

返信
DEAR GREEN FIELD より:

2004年7月11日 7:05 PM

deCode機能

/tmpl/cms/edit_entry.tmplに<script typ…

返信
StandAloneComplex より:

2004年8月12日 2:11 AM

エントリー画面にdecodeボタンetcを追加

今回は、TrivalBLOGさんを参考に、MTのエントリー画面にデコード、コー…

返信
Jolie's より:

2004年8月25日 12:21 PM

エントリー画面にDecodeボタンをつける

いろんなサイトを巡ってTIPSを集めてカスタマイズしていると、サイトの表示の都合上、＜＞を全角で表示しているところが多いです。うちもそうですけど。それっていちいち半角に直すの(‘A`)ﾏﾝﾄﾞｸｾということで、なんとか半角で表示できないかと思っていたらアレ…

返信
一体どうなんでしょうより:

2004年9月28日 9:40 PM

管理画面にDECODEボタン追加

blogを先人を参考にしながらいじっているとタグ等を貼り付けなければならない事がしばしば起こってきた。が、本文中にタグがあるものをそのままコピペしてもタグとして解釈されるため、本文中に表示されないことになる。なのでとかの記号をデコードする必要があるんで…

返信
匿名より:

2004年10月9日 4:19 PM

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

返信
二十五時の憂鬱より:

2004年10月9日 8:24 PM

投稿画面にDecodeボタンなどの便利ボタンを追加

Trivial BLOGさんの管理画面にDecodeボタンをつける。　を参考に投稿画面にDecodeボタンなどの便利ボタンを追加してみました。…

返信
えむくまより:

2004年10月10日 12:36 PM

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

返信
eternal miracle blog mode より:

2004年11月4日 11:04 PM

デコードボタンを付けよう

エントリ編集画面にデコードボタンを付けよう

返信
mavericyard* より:

2004年12月20日 10:32 AM

decode Button

記事やコメントの投稿で < > & " などの記号をそのまま使用すると表示が崩れてしまいます。そこで入力した記号がちゃんと表示されるように変換するボタンを設置します。 1 : ボタン画像　　・　まずは編集画面に使用するボタン画像を用意します。　　…

返信
PLAYNOTE より:

2005年1月13日 2:36 AM

MT編集画面にタグボタン追加

MTの編集画面に各種タグボタンとデコード用のボタンをつけた。…

返信
7-oceans より:

2005年8月11日 10:14 AM

decode Button

記事やコメントの投稿で < > & " などの記号をそのまま使用すると表示が崩れてしまいます。そこで入力した記号がちゃんと表示されるように変換するボタンを設置します。ボタン画像まずは編集画面に使用するボタン画像を用意します。画像の保存場所は

返信
7-oceans より:

2006年3月30日 4:56 PM

decode Button

記事やコメントの投稿で < > & " などの記号…

返信