alt_tmplで記事投稿画面に文字挿入ボタンをつける

■ 本題：alt_tmplで記事投稿画面に文字挿入ボタンをつける
alt_tmplについてはこちらを参照。要するに管理画面のコピーを作って、本体は触らずにコピーの方を改造するというものです。

１．ボタンの準備
この画像を 適当なところにアップ。とりあえず（自分にとって）必要最低限のボタンを用意。

２．スクリプトの準備
以下の内容をentry_button.tmplというファイル名で作成。文字コードは使っているブログに合わせます。

<script type="text/javascript">
// 選択用
function tagButtonA(tag, obj) {
var target = document.getElementById(obj);
var pos = getAreaRange(target);
var val = target.value;
var range = val.slice(pos.start, pos.end);
var beforeNode = val.slice(0, pos.start);
var afterNode = val.slice(pos.end);
var insertNode;
if (range || pos.start != pos.end) {
insertNode = '<' + tag + '>' + range + '</' + tag + '>';
target.value = beforeNode + insertNode + afterNode;
}
else if (pos.start == pos.end) {
insertNode = '<' + tag + '>' + '</' + tag + '>';
target.value = beforeNode + insertNode + afterNode;
}
}
 
// 挿入用
function tagButtonB(tag, obj) {
var target = document.getElementById(obj);
var pos = getAreaRange(target);
var val = target.value;
var beforeNode = val.slice(0, pos.start);
var afterNode = val.slice(pos.end);
var insertNode;
insertNode = '' + tag + '';
target.value = beforeNode + insertNode + afterNode;
}
 
// 実体参照変換用
function encodeButton(obj) {
var target = document.getElementById(obj);
var pos = getAreaRange(target);
var val = target.value;
var range = val.slice(pos.start, pos.end);
var beforeNode = val.slice(0, pos.start);
var afterNode = val.slice(pos.end);
var insertNode;
if (range || pos.start != pos.end) {
range = range.replace(/&/g, "&amp;");
range = range.replace(/</g, "&lt;");
range = range.replace(/>/g, "&gt;");
range = range.replace(/"/g, "&quot;");
insertNode = '' + range + '';
target.value = beforeNode + insertNode + afterNode;
}
}
 
function getAreaRange(obj) {
var pos = new Object();
if (isIE) {
obj.focus();
var range = document.selection.createRange();
var clone = range.duplicate();
clone.moveToElementText(obj);
clone.setEndPoint( 'EndToEnd', range );
pos.start = clone.text.length - range.text.length;
pos.end = clone.text.length - range.text.length + range.text.length;
}
else if(window.getSelection()) {
pos.start = obj.selectionStart;
pos.end = obj.selectionEnd;
}
return pos;
}
var isIE = (navigator.appName.toLowerCase().indexOf('internet explorer')+1?1:0);
</script>
<style type="text/css">
.tagbutton { margin:-15px 0px 15px 0px; }
.tagbutton button { background-color: #FFFFFF; border: none; padding:0px; }
</style>
 
<div class="tagbutton">
<button type="button" onclick="tagButtonA('pre','editor-content-textarea');" title="pre"><img src="ボタンのアドレス/pre.gif" width="22" height="22" /></button>
<button type="button" onclick="encodeButton('editor-content-textarea');" title="実体参照"><img src="ボタンのアドレス/enc.gif" width="22" height="22" /></button>
<button type="button" onclick="tagButtonB('&lt;br style=&quot;clear: both&quot; /&gt;','editor-content-textarea');" title="回り込み解除"><img src="ボタンのアドレス/clear.gif" width="22" height="22" /></button>
<button type="button" onclick="tagButtonB('target=&quot;_blank&quot;','editor-content-textarea');" title="別窓"><img src="ボタンのアドレス/blank.gif" width="22" height="22" /></button>
</div>

ボタン画像のアドレス（赤字の部分）は各自の環境に合わせて。

３．alt_tmplの準備
MTのファイルの中にalt_tmplというフォルダがありますが、中身は空っぽです。そこにcmsフォルダを作成して、tmpl/cms/にあるedit_entry.tmplのコピーを置きます。つまり、alt_tmplフォルダの中にtmpl/cms/edit_entry.tmplと同じ環境を作るわけです。
そして、edit_entry.tmplのコピーと同じ位置に先ほど作ったentry_button.tmplを置きます。

alt_tmpl/cms/以下にedit_entry.tmplのコピーとentry_button.tmplの２つのファイルが入ったことになります。

４．alt_tmpl/cms/edit_entry.tmplの改造
1027行目の辺り（4.1なら1054行目辺り）にある<mt:include name="include/editor.tmpl">の下に以下を追加。

<mt:include name="entry_button.tmpl">

edit_entry.tmplコピーの改造部分はこの一行だけです。これで管理画面を開くと、テキスト入力フォームの下に以下のボタンが出てきます。あとはクリックするだけで文字が入ります。

説明とか。
：選択した文字列を<pre></pre>で囲みます。HTML系でこれだけは欲しかったので入れました。
：実体参照変換ボタン。選択した文字中の「<」「>」「&」「"」を実体参照に変換します。自分には必須。
：回り込み解除ボタン。カーソルの位置に<br style="clear: both" />と入ります。floatで画像に文字を回り込みさせている時、任意の位置で回り込みを解除して画像の下から文を始めたい時に必須。
：別窓用。カーソルの位置にtarget="_blank"と入ります。別窓表示させたいリンクに。

・entry_button.tmplの中身はjavascriptなので、javascriptが分かる人は好きなように変えてやって下さい。
・entry_button.tmplの中身はMTのシステムに依存しない独立した内容になっているので、フォームのid（青字の部分）さえ合っていればどのバージョンでも動くと思います（試しに3.3のedit_entry.tmplに突っ込んでみたところ動作しました）。

＜注＞基本的に「改行を変換する」「なし」で使っている場合向けです。リッチテキストで使う場合はHTMLモードにして下さい。WYSIWYGモードでは動作しません。
VistaのIE7とFirefoxでしか動作確認していません。自分用なので、それ以外で動かなくてもサポートしません（汗）。すみません。

MTをバージョンアップした時は？
alt_tmpl/cms/edit_entry.tmplを 新しいバージョンのedit_entry.tmplに差し替え、該当箇所に
<mt:include name="entry_button.tmpl">
を入れるだけです。ちょっと手間はありますが、バージョンアップのたびに動かなくなって困るということはないかと。

管理画面に機能追加するには、プラグインの他にこんな方法もありますね、てことで。