<< Bフレッツを申し込んで10日 | main | 狂犬病予防接種 >>

管理画面に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 AM
エントリー画面が編集しやすくなりました♪
ありがとうございます!
これからもよろしくお願いいたします。
また良いものを紹介してくださいね!
喜んでいただいて何よりです(*'-')。
またなにかイジったら紹介したいと思います。
  • mkuma
  • 2004/01/23 2:09 PM
はじめまして。
お友達のところで、これを使ってるところがあったので、参考にさせていただきました。
あと、追加した画像に対する「alt」が、みんな「bold」になってた部分は変更させていただきました。
ありがとうございました。
  • TAKA
  • 2004/02/08 4:25 PM
あー、boldの行をコピーして作ったので、そのままですね。
ま、画像で分かるからいっか(´Д`;)ヾ。
  • mkuma
  • 2004/02/11 2:02 AM
いつも勝手にお世話になっています。
この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 9:02 AM
ありがとうございます!
教えていただいたサイトを参考にしてがんばってみますね♪
はじめまして。
本日トラックバックを送りました。
で…「教えてクン」になるのはいけないと思いつつも
ギブアップしてしまい書き込みしている次第です(苦笑)

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

この度は本当に、ありがとうございました♪
こんにちは。
僕も、たいちさんのように、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 11:24 PM
すみません、どういう風に使えるのか判らないんで、コメントで使わせて下さい。
コード
引用
  • 2004/10/09 4:19 PM
太字
イタリック
http://mkuma.oops.jp/">リンク
デコード
今使えるのは、これだけです。

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









この記事のトラックバックURL
トラックバック
MTの編集画面にDreamweaver風ボタンを
以前depologさんのエントリーを参考にMTの編集画面に「引用」ボタンを設置させていただいたのですが、これを応用してDreamweaver MX 2004風の各種タグ挿入ボタン一式を組み込んでみました。これを入れるとDWで編集するのと同じ感覚で色々なタグを使うことができます。......
  • 風のまにまに号
  • 2003/11/29 12:51 PM
管理画面にDecodeボタン,etc
管理画面にDecodeボタンをつけました。 「こんなボタンがあったら便利だなぁ~♪」 と思っていたところで見つけたので幸福度42%UP。
  • なかよしこよし
  • 2004/01/22 5:51 PM
Entryを快適に
Trivial Blogさんを見て便利そうなTipsを発見したので自分の環境もちょっといじってみた。 Entry画面で文字列を選択しボタンを押すだけでBやI,Uタグを簡単に付け加えられますが、これを改良して選択単語をGoogleのI'm Feeling Lucky!で検索出来るようにしてみました。たい...
  • 141 WebLog
  • 2004/02/01 9:07 PM
更にカスタマイズ
Trivial BLOG.さんの管理画面にDecodeボタンをつける。を参考に、エディタ画面にテキス...
  • ぽこねっと。
  • 2004/02/06 6:01 PM
文字の背景色と文字色
あああああと、こんな事してみたくなったので、「なかよしこよし」様のところで見つけた こんな記事 を参考に、ちょいと、いや、かなり格闘してみた。 元ネタはここ。ありがとうございます。 ここで注意すべきは、背景色も文字色も反映させたかったら、 function colorSel...
  • TAKA's loft::blog
  • 2004/02/08 4:23 PM
MT管理画面の改造
これがほしかったんだよね。 この修正のおかげでで簡単に引用を記入したり、またhtmlのタグ、例えば<a href="http://www.zakimi.com">Zakimi::Blog</a> を簡単に書いたり出来るようになります。ぜひお試しあれ 参照サイト : Trivial BLOG. - 管理画面にDecod...
  • Zakimi::Blog
  • 2004/02/19 10:56 PM
投稿画面の便利タグ機能追加
Movabletypeで話のネタを投稿する時に使うエントリー画面の横に、<B>タグや<I>タグ、URLリンクをつけるタブが標準で付いているのですが、これを自由にカスタマイズして、いろんな種類のタグを付けてらっしゃる方がいたので、自分もやってみました。 ↓参考に...
  • Marblog
  • 2004/02/26 8:45 PM
楽しく使って欲しいのです(キ▼д▼;)トホホ・・
The Gibsons!さんとこの'MT:コメントでタグ・スマイリー'というエントリーにお世話になり、コメント記事にスマイリーアイコンを表示できるようにしました(一日かかって(^^;; 更にポップアップコメントウィンドウでも同様にしたいと思いこちらのエントリーも大変参考にさせ...
  • POWER BLOG SIDE
  • 2004/02/28 11:59 PM
お天気アイコン実装!
エントリー編集画面にプルダウンメニューを追加し、お天気アイコンを一発表示!
  • POWER BLOG SIDE
  • 2004/03/02 12:03 PM
お天気アイコン実装!
エントリー編集画面にプルダウンメニューを追加し、お天気アイコンを一発表示!
  • POWER BLOG SIDE
  • 2004/03/27 1:53 PM
便利ボタン、更に発見!
ハロー、ボタンにウハビバ中です。もう止まりません。やばいです。でもつけちゃうのです。(笑)どうしてもっ!(笑) なかよしこよしさんにてエントリー時「文字にバックグラウンドカラー」をつけられるボタンを発見したので、こりゃいいやとまたまた取り入れました。(...
  • Thanks a ton.
  • 2004/04/25 11:32 PM
MTの編集画面にHTMLエディター機能を組み込む
Going My Way: MTの編集画面にHTMLエディター機能を組み込む メモ。...
  • twwblog
  • 2004/04/30 1:10 AM
MTの編集画面にHTMLエディター機能を組み込む
Going My Way: MTの編集画面にHTMLエディター機能を組み込む メモ。...
  • twwblog
  • 2004/04/30 1:14 AM
Mozillaでの編集ボタン動作改善3
Mozillaでの編集ボタン動作改善に対するトラックバック記事Mozilla で MT の編集ボタンその4を参考に、編集画面の修正を実施した。
  • bluesky Blog
  • 2004/05/10 1:27 AM
Decodeと文字色をつける
文字フォントを変えるに引き続き、エントリー画面をどんどん変更しまーす。 Trivial BLOGさんの「管理画面にDecodeボタンをつける」と「Color Selectorをつける」を参考にしました。 ※補記:Decodeは<>を自動で&lt;とか&gt;に直してくれるボタンです。 やっぱ...
  • MovableTypeを攻略せよ!
  • 2004/05/20 9:44 AM
IEとMozillaで使う編集ボタン
会社でエントリーする時Windowsからするけど、 自宅でやる時はSafariで閲覧してるから、Mozilla系でも投稿時に便利になってもらわんと。 IEにdecodeとか組み込んでると、MozillaはいいんだけどIEでエラーがでる。 こりゃ〜納得いかない。 検索、検索。......
  • hwp blog
  • 2004/06/16 11:48 AM
Decodeボタンをつける。
タグとかの引用をかなーり使うので、 デコードボタンも作ろうと思います。 Reference 管理画面にDecodeボタンをつける。 From Trivial BLOG 投稿画面の便利タグ機能追加 From Marglog.net Ver 2.6では・・・。 Referenceを参考にしてください。 (書く気無くなりました。) ...
  • PC Blog @ Noel Cafe
  • 2004/07/06 11:18 PM
管理画面やコメントでのボタンについて。
色々、このブログに書きましたが、 それについて書いてあるブログリファレンスを まとめてみました。 ま、順序は適当。どれが出元だか分からなくなってきたのー。<おい。 Reference @ PC Blog @ Noel Cafe blockquoteボタン URLボタンの手直し。 HRボタンをつくる。 Deco...
  • PC Blog @ Noel Cafe
  • 2004/07/06 11:21 PM
deCode機能
/tmpl/cms/edit_entry.tmplに<script typ...
  • DEAR GREEN FIELD
  • 2004/07/11 7:05 PM
エントリー画面にdecodeボタンetcを追加
今回は、TrivalBLOGさんを参考に、MTのエントリー画面にデコード、コー...
  • StandAloneComplex
  • 2004/08/12 2:11 AM
エントリー画面にDecodeボタンをつける
いろんなサイトを巡ってTIPSを集めてカスタマイズしていると、 サイトの表示の都合上、 <>を全角で表示しているところが多いです。 うちもそうですけど。 それっていちいち半角に直すの('A`)マンドクセということで、 なんとか半角で表示できないかと思っていたらアレ...
  • Jolie's
  • 2004/08/25 12:21 PM
管理画面にDECODEボタン追加
blogを先人を参考にしながらいじっていると タグ等を貼り付けなければならない事がしばしば起こってきた。 が、本文中にタグがあるものをそのままコピペしても タグとして解釈されるため、本文中に表示されないことになる。 なのでとかの記号をデコードする必要があるんで...
  • 一体どうなんでしょう
  • 2004/09/28 9:40 PM
投稿画面にDecodeボタンなどの便利ボタンを追加
Trivial BLOGさんの管理画面にDecodeボタンをつける。 を参考に投稿画面にDecodeボタンなどの便利ボタンを追加してみました。...
  • 二十五時の憂鬱
  • 2004/10/09 8:24 PM
デコードボタンを付けよう
エントリ編集画面にデコードボタンを付けよう
  • eternal miracle blog mode
  • 2004/11/04 11:04 PM
decode Button
記事やコメントの投稿で < > & " などの記号をそのまま使用すると表示が崩れてしまいます。 そこで入力した記号がちゃんと表示されるように変換するボタンを設置します。 1 : ボタン画像   ・ まずは編集画面に使用するボタン画像を用意します。   ...
  • mavericyard*
  • 2004/12/20 10:32 AM
MT編集画面にタグボタン追加
MTの編集画面に各種タグボタンとデコード用のボタンをつけた。...
  • PLAYNOTE
  • 2005/01/13 2:36 AM
decode Button
記事やコメントの投稿で < > & " などの記号をそのまま使用すると表示が崩れてしまいます。そこで入力した記号がちゃんと表示されるように変換するボタンを設置します。 ボタン画像 まずは編集画面に使用するボタン画像を用意します。 画像の保存場所は
  • 7-oceans
  • 2005/08/11 10:14 AM
decode Button
記事やコメントの投稿で < > & " などの記号...
  • 7-oceans
  • 2006/03/30 4:56 PM
selected entries
categories
archives
recent comment
recent trackback
links
profile
search this site.
others
Google AdSense
CreativeCommons
クリエイティブ・コモンズ・ライセンス