デコードボタンをつける。

2006/03/18 14:00

0318.jpg

タグを記載する時に、<や>を&lt;や>と書かないとうまく表示が出来ないが、いちいち直すのは
大変手間がかかるので、エントリー投稿画面にデコードボタンをつけた。

mt/tmpl/cms/ の中にある、bm_entry.tmpl と edit_entry.tmplとを編集する。
まず、bm_entry.tmpl。

write('<a title="<MT_TRANS phrase="Bold">"
この列の上に下記を追加する。
write('<a title="<MT_TRANS phrase="Decode">" href="#" onclick="return Decode(document.entry_form.text)"><img src="<TMPL_VAR NAME=STATIC_URI>images/decode.gif" alt="<MT_TRANS phrase="Decode">" width="22" height="16" border="0" /></a>');

そうするとこのようになる。

write('<a title="<MT_TRANS phrase="Decode">" href="#" onclick="return Decode(document.entry_form.text)"><img src="<TMPL_VAR NAME=STATIC_URI>images/decode.gif" alt="<MT_TRANS phrase="Decode">" width="22" height="16" border="0" /></a>');
write('<a title="<MT_TRANS phrase="Bold">" href="#" onclick="return formatStr(document.entry
_form.text, \'strong\')"><img src="<TMPL_VAR NAME=STATIC_URI>images/html-bold.gif" alt="<MT_TRANS phrase="Bold">" width="22" height="16" /></a>');

次に、edit_entry.tmpl。
bm_entry.tmplと同様に下記を探す。

write('<a title="<MT_TRANS phrase="Bold">"

上記の上に、下記を追加する。

write('<a title="<MT_TRANS phrase="Decode">" href="#" onclick="return Decode(document.entry_form.text)"><img src="<TMPL_VAR NAME=STATIC_URI>images/decode.gif" alt="<MT_TRANS phrase="Decode">" width="22" height="16" border="0" /></a>');

そうするとこのようになる。ここまではまったく一緒。

write('<a title="<MT_TRANS phrase="Decode">" href="#" onclick="return Decode(document.entry_form.text)"><img src="<TMPL_VAR NAME=STATIC_URI>images/decode.gif" alt="<MT_TRANS phrase="Decode">" width="22" height="16" border="0" /></a>');
write('<a title="<MT_TRANS phrase="Bold">" href="#" onclick="return formatStr(document.entry_form.text, \'strong\')"><img src="<TMPL_VAR NAME=STATIC_URI>images/html-bold.gif" alt="<MT_TRANS phrase="Bold">" width="22" height="16" /></a>');

続いて、下にスクロールしてもう一度下記を探す。

write('<a title="<MT_TRANS phrase="Bold">"

上記の上に、下記を追加する。
write('<a title="<MT_TRANS phrase="Decode">" href="#" onclick="return Decode(document.entry_form.text_more)"><img src="<TMPL_VAR NAME=STATIC_URI>images/decode.gif" alt="<MT_TRANS phrase="Decode">" width="22" height="16" border="0" /></a>');

そうすると、下記のようになる。

write('<a title="<MT_TRANS phrase="Decode">" href="#" onclick="return Decode(document.entry_form.text_more)"><img src="<TMPL_VAR NAME=STATIC_URI>images/decode.gif" alt="<MT_TRANS phrase="Decode">" width="22" height="16" border="0" /></a>');
write('<a title="<MT_TRANS phrase="Bold">" href="#" onclick="return formatStr(document.entry_form.text_more, \'strong\')"><img src="<TMPL_VAR NAME=STATIC_URI>images/html-bold.gif" alt="<MT_TRANS phrase="Bold">" width="22" height="16" /></a>');

そして、/mt/mt-static/mt_ja.js を編集する。

下記を探す。

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

上記の下に下記を追加しする。

function Decode(e) {     if (!canFormat) return;     var str = getSelected(e);     if (!str) return;     str = str.replace(new RegExp("&","g"), "&amp;");     str = str.replace(new RegExp("<","g"), "&lt;");     str = str.replace(new RegExp(">","g"), "&gt;");     str = str.replace(new RegExp('"',"g"), "&quot;");     str = str.replace(new RegExp(' ',"g"), "&nbsp;");     setSelection(e, str);     return false; }
そうすると、下記のようになる。
function formatStr (e, v) {     if (!canFormat) return;     var str = getSelected(e);     if (!str) return;     setSelection(e, '<' + v + '>' + str + '</' + v + '>');     return false; }

function Decode(e) {
    if (!canFormat) return;
    var str = getSelected(e);
    if (!str) return;
    str = str.replace(new RegExp("&","g"), "&amp;");
    str = str.replace(new RegExp("<","g"), "&lt;");
    str = str.replace(new RegExp(">","g"), "&gt;");
    str = str.replace(new RegExp('"',"g"), "&quot;");
    str = str.replace(new RegExp(' ',"g"), "&nbsp;");
    setSelection(e, str);
    return false;
}

mt/tmpl/cms/bm_entry.tmpl と edit_entry.tmplと、
mt/mt-static/mt_ja.jsをアップロードする。
エントリー画面を確認すると、画像のようになると思われる。

ボタン画像は21世紀のアフィリエイト通販生活さんのエントリーからいただきました。

コメントを投稿

トラックバック・パーマリンク

このエントリのトラックバックURL: http://raiga.s352.xrea.com/mt/mt-tb.cgi/47

このエントリのパーマリンク: デコードボタンをつける。:

このエントリのパーマリンク: "http://raiga.net/blog/2006/03/20060318_1400.php">

» エントリー投稿画面にDecodeボタン from お気楽極楽ブログ
HTMLコードを記事で使用する際は、'&' や '' をデコード(サニタイズ?)しないといけない。 これまでは、そこの部分だ... [詳しくはこちら]

» MT - エントリー投稿ボタンをプチ・リッチ化 from お気楽極楽ブログ
個人的によく使うボタンを作ったので配布してみます。... [詳しくはこちら]

※エントリに関係の無い、宣伝等のコメント・トラックバックは独断により削除させていただくことがございますので、ご了承くださいますようお願いいたします。