Sukarabe's Easy Living

MovableTypeに限らないと思うがHTMLを記述するためのエディターでは編集支援のための便利なツールが備え付けてあることが多い。例えばある文字列（ここでは ほげほげ としよう）にハイパーリンクを付けたいときは，その文字列を選択し（画面上では反転する）ハイパーリンクというボタン（アイコン）をクリックするとURI（URL）入力のウィンドウがポップアップし，それに例えば http://www.hogehoge.com などと入力すれば，エディター画面では <a href="http://www.hogehoge.com">ほげほげ</a> というなる。この程度だったらそのまま入力しても苦にならない。ところが，このHTMLコードをこの日記に記述するとなると（HTMLコードをそのまま書けばブラウザへの命令になってしまうから！），例えば，「<」なら「&lt;」のように書かねばならない。これはさすがにうんざりだ。

という訳で，それを支援してくれるDecodeボタンが欲しくなるというものだった。改造手順は次の通り。

デコードボタンの画像をアップロードする

画像というかアイコンでなくとも文字でもいいのだが，これも以前どこからかもらってきた （ファイル名は decode-button.gif）を使う。これをmt直下のimagesディレクトリーにアップする。

mt.js を編集する

mt直下にある mt.js というファイルを編集する。いざというときには元に戻せないと困るので，バックアップをとっておく。僕の場合は改造するファイルはディレクトリー構成も含めて別の場所に保管することにしている。例えばmt-modifiedというフォルダーをmtを解凍したところに作って，その直下に mt.js のコピーを作り，それをテキスト・エディターで開く。（どこでもいいとは思うが） formatStr という関数の次あたりに，新たに Decode という関数を作る。

function Decode(e) {
    if (!canFormat) return;
    var str = getSelection(e);
    if (!str) return;
    str = str.replace(new RegExp("&","g"), "&");
    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;&nbsp;");
    str = str.replace(new RegExp('&nbsp; ',"g"), "&nbsp;&nbsp;");
    setSelection(e, str);
    return false;}

edit_entry.tmpl などを編集する

tmpl/cms/ にある edit_entry.tmpl と bm_entry.tmpl のコピーを mt-modified/tmpl/cms/ に作り，テキスト・エディターで開く。 ItalicとかBoldとか書いてあるところを探すと次の行と似たような行がいくつも並んでいる箇所がある。edit_entry.tmpl だと本文用のテキストエリアと追記部分の2カ所あることに注意。

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

まず本文入力部（最初にある方）に上記のコードを挿入する。ここでは見やすさを考えて何行かに分けているが実際には一行にする。次に，追記の部分のテキストエリアにボタンを付ける際には， return Decode(document.entry_form.text_more) のように一カ所を text_more に変更する。これは周りの行に書いてあることを観察すれば分かる。

改造したファイルをアップロードする

変更を施した mt.js, edit_entry.tmpl, bm_entry.tmpl をそれぞれあるべきディレクトリーにFTPソフトでアップロードする。以上で終了。