2004年9月28日

管理画面にDECODEボタン追加

blogを先人を参考にしながらいじっていると
その改造を四苦八苦に記録するため、
本文中にタグ等を貼り付けなければならない事がしばしば起こってきた。
が、本文中にタグがあるものをそのままコピペしても
タグとして解釈されるため、本文中に表示されないことになる。
なので<とか>とかの記号をデコードする必要があるんですが
イチイチ変換するのは非常にダルイのです。

んで、ナントカならないものかと色々と調べていると
<>&をデコードするボタン等を追加する方法があったんで
早速導入。
参考先はTrivial BLOG.さん。

上記サイトをそのままやると
Decodeボタンの他に、
<div class="code"></div>というタグをはさむボタンと
<div class="blockquote"></div>というタグをはさむボタンが生成される。
Decodeボタン以外は要らないので
ウチの場合は下記のように変更しました。

変更するファイルは、CGIパス\tmpl\cms\にある
bm_entry.tmpl
edit_entry.tmpl
の二つ。

まず、bm_entry.tmpl、edit_entry.tmpl各ファイルの

<script language="JavaScript">
<!--
(色んなスクリプトが書いてあります)
//-->
</script>
の部分に下記スクリプトを書き足します。
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;
}

次に、各ファイルの

<script language="javascript">

if (document.selection) {

と書いてある部分を探し、(この部分がボタンの部分ですね)
下記スクリプトを書き足します。
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>');

で、
decode-button.gif
この画像ファイルをCGIパス\images内にアップロードしてオシマイ。

また、MTはデフォルトの状態だと
太字ボタンは<b>タグで、ナナメ字ボタンは<i>タグで排出する。
現在のタグから言うと、
太字は<stront>タグ、ナナメ字は<em>タグで表した方がイイらしいので
ソッチの方もついでにやっちまいました。

先ほどの

<script language="javascript">

if (document.selection) {

の部分の下にある
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(\'strong\')"><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(\'em\')"><img src="<TMPL_VAR NAME=STATIC_URI>images/italic-button.gif" alt="italic" width="24" height="18" border="0"></a></td>');

と書き換えます。(ボタン画像面倒なんで流用の方向で(汗)

これから先、タグをワンボタンで挿入シタイナーなんて場合は
上記部分を改変して足していけばいいと思います。
ボタンまみれになる予感がしますが。


このエントリーをはてなブックマークに追加

Posted by otama at 21:37
TrackBack
このエントリーのトラックバックURL:

※商品宣伝等のトラックバックは削除する場合があります。