[Movable Type] エントリー編集画面にボタンを追加する
コードなどをpreタグ内で使う場合など、>など実体参照に変換するためにいちいち他のエディタのマクロや正規表現で編集するのが面倒なので実体参照変換ボタンをJavascriptで実装してエントリー編集画面に追加してみた。
MovableTypeの管理画面のテンプレートはtmpl/cms/以下にある。エントリーの編集画面はedit_entry.tmpl。中を覗いてみると、さらにheader.tmplをincludeしていてMovableTypeディレクトリの直下のmt.jsというJavascriptをincludeしているのでこれに新たに関数を追加して、edit_entry.tmplから読んでやるようにすればいい。
・実体参照変換ボタン
MovableTypeのディレクトリの直下のmt.jsの最後に
function escapeHtml(e) {
if (!canFormat) return;
var str = getSelection(e);
if (!str) return;
str = str.replace( /\&/g, '&' );
str = str.replace( /</g, '<' );
str = str.replace( />/g, '>' );
str = str.replace( /\"/g, '"' );
str = str.replace( /\'/g, ''' );
setSelection(e,str);
return false;
}
を追加する。とりあえず&、<、>、"、'をエスケープしてやるようにした。
tmpl/cms/edit_entry.tmplの176行目あたりにボタンの配置がJavascriptで書かれているのでここに以下を追加
write('<a title="<MT_TRANS phrase="Html Escape">" href="#" onclick="return escapeHtml(document.entry_form.text)"><img src="<TMPL_VAR NAME=STATIC_URI>images/escape-button.gif" alt="<MT_TRANS phrase="Html Escape">" width="26" height="18" border="0" /></a>');
あとは26X18のescape-button.gifを作ってMovableTypeディレクトリのimagesディレクトリに置いてやればOK。
・blockquoteボタン
指定した範囲をblockquoteでくくるボタン。
これはJavascriptの追加は必要なく、edit_entry.tmplの編集だけでいい。以下のコードを先ほど編集した行の下にでも追加してやる。
write('<a title="<MT_TRANS phrase="Quote">" href="#" onclick="return formatStr(document.entry_form.text, \'blockquote\')"><img src="<TMPL_VAR NAME=STATIC_URI>images/quote-button.gif" alt="<MT_TRANS phrase="Quote">" width="26" height="18" border="0" /></a>');
・リスト生成ボタン
WordやDreamweaverのように指定した範囲を改行ごとにリストにしてくれるボタン。
mt.jsに以下を追加。
function formatList(e, v) {
if (!canFormat) return;
var str = getSelection(e);
if (!str) return;
line = str.split('\n');
result = '<' + v + '>\n';
for (i = 0; i < line.length; i++) {
result = result + '<li>' + line[i].replace('\r', '') + '</li>\n';
}
result = result + '</' + v + '>\n';
setSelection(e, result);
return false;
}
tmpl/cms/edit_entry.tmplに以下を追加。
write('<a title="<MT_TRANS phrase="List">" href="#" onclick="return formatList(document.entry_form.text, \'ul\')"><img src="<TMPL_VAR NAME=STATIC_URI>images/ul-button.gif" alt="<MT_TRANS phrase="List">" width="26" height="18" border="0" /></a>');
write('<a title="<MT_TRANS phrase="Number List">" href="#" onclick="return formatList(document.entry_form.text, \'ol\')"><img src="<TMPL_VAR NAME=STATIC_URI>images/ol-button.gif" alt="<MT_TRANS phrase="Number List">" width="26" height="18" border="0" /></a>');
