top

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

自分のための覚え書きですが、試してみたいという方がおられましたらご自由にどうぞ~。ただし自己責任でお願い致しますです。

込み入ったカスタマイズ系の記事はExpression Webで下書きしているので、MTの管理画面にはそんなに本格的なWYSIWYGエディタは必要ないんですが、軽い覚え書きや気軽に書きたい日記、雑記系では直接MTの管理画面から気分のままに打ち込むことも多いので、そんな時ちょっとした補助ボタンがあるといいなあと思うことがあります。

しかし。タグ挿入支援とか色文字とか管理画面にボタンを追加してくれるプラグインはいろいろありますが、私の場合は文字を<p></p>とかのHTMLタグで囲むのではなくて、単に文字列(オリジナルのclassとか、よく使うstyleとか)だけをカーソルの位置にポンと入れたいだけなんですよね…。

080800_1.gif

←それで、alt_tmplを使って、記事入力画面の下によく使うスタイルなどを並べていたんですが、これだと文字を選択してから入力画面にドラッグするという手間がかかるので少し面倒くさい。押すだけで一発で入ってくれたら便利でいいのになーと思っていました。
たまたまコメントにエンコードボタンで、自分でも応用できそうなjavascriptを見つけたので、それを使って一発で挿入できるボタンに改造してみました。alt_tmplを使っているのでプラグインではないです。

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

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

2.スクリプトの準備
以下の内容を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>

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

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

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

080800_2.gif

説明とか。
:選択した文字列を<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">
を入れるだけです。ちょっと手間はありますが、バージョンアップのたびに動かなくなって困るということはないかと。

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

 

トラックバックURL

トラックバックされる際にはこの記事へのリンクをお願い致します

コメント

こんにちは_(..)_
この方法良いですね。すごく便利です。IE6で動く事を確認しました。
私も幾つか独自に利用してる記述があるので、早速導入してみる事にします。

こんにちは^^
IE6でも動きましたかー。
ちょっとしたことで使い勝手ってよくなりますよね。
alt_tmplを使う方法ならバージョンが上がっても自力で対応していけそうです。

また来ちゃいました。こんにちは_(..)_
ローカルxamppではうまく出来たのですが、なぜか本稼動してるMTではダメでした。泣けます。
alt_tmpl以下の代替テンプレートが認識されないみたいです。
私特有の問題が出ちゃったようで、なんとも口惜しい限りです(別サーバのMTではちゃんと出来てるので)。
MTはキレイに入れ換えたので、遂にデータベースが・・・と震えてます。

ええ~それは不思議ですね。
そのレベルになると私にはちょっと分かりませんが、本ブログで動かないのは悔しいですよねえ。
なんとか原因究明出来て使えるようになるといいですね。
alt_tmplの使い道ってこれだけじゃないですものね。

コメントを投稿

 


 <注意>
 ご利用のブラウザ、設定ではコメントのプレビューおよび投稿はご利用になれません。
 コメント投稿の際はお手数ですがjavascriptをオンにして下さい。
 *javascriptオフのまま投稿ボタンを押すと送信内容が消えますのでご注意下さい。